From 3fe2b46dd0b00a2dbca8c2bb154e61fe436869cb Mon Sep 17 00:00:00 2001
From: Bryan Lima <42067040+BryanMLima@users.noreply.github.com>
Date: Wed, 12 Jun 2024 04:10:32 -0300
Subject: [PATCH] [UI] Add option to specify account/project while deploying
 VMs and creating networks (#8919)

---
 ui/public/locales/en.json                     |   1 +
 ui/public/locales/pt_BR.json                  |   1 +
 ui/src/views/compute/AssignInstance.vue       | 167 +-----------
 ui/src/views/compute/DeployVM.vue             |  94 ++++++-
 .../compute/wizard/OwnershipSelection.vue     | 257 ++++++++++++++++++
 .../network/CreateIsolatedNetworkForm.vue     | 171 +++---------
 ui/src/views/network/CreateL2NetworkForm.vue  | 144 +++-------
 7 files changed, 421 insertions(+), 414 deletions(-)
 create mode 100644 ui/src/views/compute/wizard/OwnershipSelection.vue

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index cb279c7a149..86a74384cb7 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -1557,6 +1557,7 @@
 "label.ovmnetworklabel": "OVM traffic label",
 "label.ovs": "OVS",
 "label.owner.account": "Owner Account",
+"label.owner.type": "Owner type",
 "label.owners": "Owners",
 "label.pa": "Palo Alto",
 "label.page": "page",
diff --git a/ui/public/locales/pt_BR.json b/ui/public/locales/pt_BR.json
index cc8e22d5e47..9d64cc27150 100644
--- a/ui/public/locales/pt_BR.json
+++ b/ui/public/locales/pt_BR.json
@@ -1155,6 +1155,7 @@
 "label.ovmnetworklabel": "R\u00f3tulo de tr\u00e1fego OVM",
 "label.ovs": "OVS",
 "label.owner.account": "Dono da conta",
+"label.owner.type": "Tipo de dono",
 "label.owners": "Donos",
 "label.pa": "Palo Alto",
 "label.page": "p\u00e1gina",
diff --git a/ui/src/views/compute/AssignInstance.vue b/ui/src/views/compute/AssignInstance.vue
index 9726dc21577..873d10f5770 100644
--- a/ui/src/views/compute/AssignInstance.vue
+++ b/ui/src/views/compute/AssignInstance.vue
@@ -29,86 +29,7 @@
         </template>
       </a-alert>
 
-      <div class="form__item">
-        <p class="form__label">{{ $t('label.accounttype') }}</p>
-        <a-select
-          v-model:value="selectedAccountType"
-          v-focus="true"
-          showSearch
-          optionFilterProp="value"
-          :filterOption="(input, option) => {
-            return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }">
-          <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
-          <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
-        </a-select>
-      </div>
-
-      <div class="form__item">
-        <p class="form__label"><span class="required">*</span>{{ $t('label.domain') }}</p>
-        <a-select
-          @change="changeDomain"
-          v-model:value="selectedDomain"
-          showSearch
-          optionFilterProp="label"
-          :filterOption="(input, option) => {
-            return  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }" >
-          <a-select-option v-for="domain in domains" :key="domain.name" :value="domain.id" :label="domain.path || domain.name || domain.description">
-            <span>
-              <resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
-              <block-outlined v-else style="margin-right: 5px" />
-              {{ domain.path || domain.name || domain.description }}
-            </span>
-          </a-select-option>
-        </a-select>
-      </div>
-
-      <template v-if="selectedAccountType === $t('label.account')">
-        <div class="form__item">
-          <p class="form__label"><span class="required">*</span>{{ $t('label.account') }}</p>
-          <a-select
-            @change="changeAccount"
-            v-model:value="selectedAccount"
-            showSearch
-            optionFilterProp="value"
-            :filterOption="(input, option) => {
-              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
-              <span>
-                <resource-icon v-if="account && account.icon" :image="account.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <team-outlined v-else style="margin-right: 5px" />
-                {{ account.name }}
-              </span>
-            </a-select-option>
-          </a-select>
-          <span v-if="accountError" class="required">{{ $t('label.required') }}</span>
-        </div>
-      </template>
-
-      <template v-else>
-        <div class="form__item">
-          <p class="form__label"><span class="required">*</span>{{ $t('label.project') }}</p>
-          <a-select
-            @change="changeProject"
-            v-model:value="selectedProject"
-            showSearch
-            optionFilterProp="label"
-            :filterOption="(input, option) => {
-              return  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option v-for="project in projects" :key="project.id" :value="project.id" :label="project.name">
-              <span>
-                <resource-icon v-if="project && project.icon" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
-                <project-outlined v-else style="margin-right: 5px" />
-                {{ project.name }}
-              </span>
-            </a-select-option>
-          </a-select>
-          <span v-if="projectError" class="required">{{ $t('label.required') }}</span>
-        </div>
-      </template>
+      <ownership-selection @fetch-owner="fetchOwnerOptions"/>
 
       <div class="form__item">
         <p class="form__label">{{ $t('label.network') }}</p>
@@ -146,6 +67,7 @@
 <script>
 import { api } from '@/api'
 import ResourceIcon from '@/components/view/ResourceIcon'
+import OwnershipSelection from '@views/compute/wizard/OwnershipSelection'
 
 export default {
   name: 'AssignInstance',
@@ -156,7 +78,8 @@ export default {
     }
   },
   components: {
-    ResourceIcon
+    ResourceIcon,
+    OwnershipSelection
   },
   inject: ['parentFetchData'],
   data () {
@@ -175,60 +98,13 @@ export default {
       loading: false
     }
   },
-  created () {
-    this.fetchData()
-  },
   methods: {
-    fetchData () {
-      this.loading = true
-      api('listDomains', {
-        response: 'json',
-        listAll: true,
-        showicon: true,
-        details: 'min'
-      }).then(response => {
-        this.domains = response.listdomainsresponse.domain || []
-        this.selectedDomain = this.domains[0].id
-        this.fetchAccounts()
-        this.fetchProjects()
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.loading = false
-      })
-    },
-    fetchAccounts () {
-      this.loading = true
-      api('listAccounts', {
-        response: 'json',
-        domainId: this.selectedDomain,
-        showicon: true,
-        state: 'Enabled',
-        isrecursive: false
-      }).then(response => {
-        this.accounts = response.listaccountsresponse.account || []
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.loading = false
-      })
-    },
-    fetchProjects () {
-      this.loading = true
-      api('listProjects', {
-        response: 'json',
-        domainId: this.selectedDomain,
-        state: 'Active',
-        showicon: true,
-        details: 'min',
-        isrecursive: false
-      }).then(response => {
-        this.projects = response.listprojectsresponse.project || []
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.loading = false
-      })
+    fetchOwnerOptions (selectedOptions) {
+      this.selectedAccountType = selectedOptions.selectedAccountType
+      this.selectedAccount = selectedOptions.selectedAccount
+      this.selectedDomain = selectedOptions.selectedDomain
+      this.selectedProject = selectedOptions.selectedProject
+      this.fetchNetworks()
     },
     fetchNetworks () {
       this.loading = true
@@ -252,23 +128,6 @@ export default {
         this.loading = false
       })
     },
-    changeDomain () {
-      this.selectedAccount = null
-      this.selectedProject = null
-      this.selectedNetwork = null
-      this.fetchAccounts()
-      this.fetchProjects()
-    },
-    changeAccount () {
-      this.selectedProject = null
-      this.selectedNetwork = null
-      this.fetchNetworks()
-    },
-    changeProject () {
-      this.selectedAccount = null
-      this.selectedNetwork = null
-      this.fetchNetworks()
-    },
     closeAction () {
       this.$emit('close-action')
     },
@@ -356,12 +215,6 @@ export default {
     }
   }
 
-  .required {
-    margin-right: 2px;
-    color: red;
-    font-size: 0.7rem;
-  }
-
   .loading {
     position: absolute;
     top: 0;
diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index ef3926bbca0..865ee79d76c 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -29,6 +29,17 @@
             layout="vertical"
           >
             <a-steps direction="vertical" size="small">
+              <a-step
+                v-if="!isNormalUserOrProject"
+                :title="this.$t('label.assign.instance.another')">
+                <template #description>
+                  <div style="margin-top: 15px">
+                    {{ $t('label.assigning.vms') }}
+                    <ownership-selection
+                      @fetch-owner="fetchOwnerOptions"/>
+                  </div>
+                </template>
+              </a-step>
               <a-step :title="$t('label.select.deployment.infrastructure')" status="process">
                 <template #description>
                   <div style="margin-top: 15px">
@@ -848,6 +859,7 @@ import { mixin, mixinDevice } from '@/utils/mixin.js'
 import store from '@/store'
 import eventBus from '@/config/eventBus'
 
+import OwnershipSelection from '@views/compute/wizard/OwnershipSelection'
 import InfoCard from '@/components/view/InfoCard'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import ComputeOfferingSelection from '@views/compute/wizard/ComputeOfferingSelection'
@@ -868,6 +880,7 @@ import InstanceNicsNetworkSelectListView from '@/components/view/InstanceNicsNet
 export default {
   name: 'Wizard',
   components: {
+    OwnershipSelection,
     SshKeyPairSelection,
     UserDataSelection,
     NetworkConfiguration,
@@ -965,6 +978,11 @@ export default {
         hosts: false,
         groups: false
       },
+      owner: {
+        projectid: store.getters.project?.id,
+        domainid: store.getters.project?.id ? null : store.getters.userInfo.domainid,
+        account: store.getters.project?.id ? null : store.getters.userInfo.account
+      },
       instanceConfig: {},
       template: {},
       defaultBootType: '',
@@ -1056,11 +1074,21 @@ export default {
     isNormalAndDomainUser () {
       return ['DomainAdmin', 'User'].includes(this.$store.getters.userInfo.roletype)
     },
+    isNormalUserOrProject () {
+      return ['User'].includes(this.$store.getters.userInfo.roletype) || store.getters.project.id
+    },
     diskSize () {
-      const rootDiskSize = _.get(this.instanceConfig, 'rootdisksize', 0)
-      const customDiskSize = _.get(this.instanceConfig, 'size', 0)
+      let dataDiskSize
+      let rootDiskSize = _.get(this.instanceConfig, 'rootdisksize', 0)
       const diskOfferingDiskSize = _.get(this.diskOffering, 'disksize', 0)
-      const dataDiskSize = diskOfferingDiskSize > 0 ? diskOfferingDiskSize : customDiskSize
+      const customDiskSize = _.get(this.instanceConfig, 'size', 0)
+
+      if (this.vm.isoid != null) {
+        rootDiskSize = diskOfferingDiskSize > 0 ? diskOfferingDiskSize : customDiskSize
+      } else {
+        dataDiskSize = diskOfferingDiskSize > 0 ? diskOfferingDiskSize : customDiskSize
+      }
+
       const size = []
       if (rootDiskSize > 0) {
         size.push(`${rootDiskSize} GB (Root)`)
@@ -1079,6 +1107,9 @@ export default {
           list: 'listServiceOfferings',
           options: {
             zoneid: _.get(this.zone, 'id'),
+            projectid: this.owner.projectid,
+            domainid: this.owner.domainid,
+            account: this.owner.account,
             issystem: false,
             page: 1,
             pageSize: 10,
@@ -1089,6 +1120,9 @@ export default {
           list: 'listDiskOfferings',
           options: {
             zoneid: _.get(this.zone, 'id'),
+            projectid: this.owner.projectid,
+            domainid: this.owner.domainid,
+            account: this.owner.account,
             page: 1,
             pageSize: 10,
             keyword: undefined
@@ -1111,6 +1145,9 @@ export default {
           options: {
             page: 1,
             pageSize: 10,
+            account: this.owner.account,
+            domainid: this.owner.domainid,
+            projectid: this.owner.projectid,
             keyword: undefined,
             listall: false
           }
@@ -1138,9 +1175,9 @@ export default {
           options: {
             zoneid: _.get(this.zone, 'id'),
             canusefordeploy: true,
-            projectid: store.getters.project ? store.getters.project.id : null,
-            domainid: store.getters.project && store.getters.project.id ? null : store.getters.userInfo.domainid,
-            account: store.getters.project && store.getters.project.id ? null : store.getters.userInfo.account,
+            projectid: store.getters.project.id || this.owner.projectid,
+            domainid: store.getters.project.id ? null : this.owner.domainid,
+            account: store.getters.project.id ? null : this.owner.account,
             page: 1,
             pageSize: 10,
             keyword: undefined,
@@ -1303,7 +1340,7 @@ export default {
       return tabList
     },
     showSecurityGroupSection () {
-      return (this.networks.length > 0 && this.zone.securitygroupsenabled) || (this.zone && this.zone.networktype === 'Basic')
+      return (this.networks.length > 0 && this.zone?.securitygroupsenabled) || (this.zone?.networktype === 'Basic')
     },
     isUserAllowedToListSshKeys () {
       return Boolean('listSSHKeyPairs' in this.$store.getters.apis)
@@ -1372,7 +1409,7 @@ export default {
           this.diskOffering = _.find(this.options.diskOfferings, (option) => option.id === instanceConfig.diskofferingid)
         }
 
-        this.zone = _.find(this.options.zones, (option) => option.id === instanceConfig.zoneid)
+        this.zone = _.find(this.options.zones, (option) => option.id === this.instanceConfig.zoneid)
         this.affinityGroups = _.filter(this.options.affinityGroups, (option) => _.includes(instanceConfig.affinitygroupids, option.id))
         this.networks = this.getSelectedNetworksWithExistingConfig(_.filter(this.options.networks, (option) => _.includes(instanceConfig.networkids, option.id)))
 
@@ -1685,8 +1722,8 @@ export default {
     fetchInstaceGroups () {
       this.options.instanceGroups = []
       api('listInstanceGroups', {
-        account: this.$store.getters.userInfo.account,
-        domainid: this.$store.getters.userInfo.domainid,
+        account: this.$store.getters.project?.id ? null : this.$store.getters.userInfo.account,
+        domainid: this.$store.getters.project?.id ? null : this.$store.getters.userInfo.domainid,
         listall: true
       }).then(response => {
         const groups = response.listinstancegroupsresponse.instancegroup || []
@@ -1830,7 +1867,7 @@ export default {
       this.userDataParams = []
       api('listUserData', { id: id }).then(json => {
         const resp = json?.listuserdataresponse?.userdata || []
-        if (resp) {
+        if (resp[0]) {
           var params = resp[0].params
           if (params) {
             var dataParams = params.split(',')
@@ -2086,6 +2123,14 @@ export default {
           deployVmData.bootintosetup = values.bootintosetup
         }
 
+        if (this.owner.account) {
+          deployVmData.account = this.owner.account
+          deployVmData.domainid = this.owner.domainid
+        } else if (this.owner.projectid) {
+          deployVmData.domainid = this.owner.domainid
+          deployVmData.projectid = this.owner.projectid
+        }
+
         const title = this.$t('label.launch.vm')
         const description = values.name || ''
         const password = this.$t('label.password')
@@ -2178,6 +2223,29 @@ export default {
         }
       })
     },
+    fetchOwnerOptions (OwnerOptions) {
+      this.owner = {
+        projectid: null,
+        domainid: store.getters.userInfo.domainid,
+        account: store.getters.userInfo.account
+      }
+      if (OwnerOptions.selectedAccountType === this.$t('label.account')) {
+        if (!OwnerOptions.selectedAccount) {
+          return
+        }
+        this.owner.account = OwnerOptions.selectedAccount
+        this.owner.domainid = OwnerOptions.selectedDomain
+        this.owner.projectid = null
+      } else if (OwnerOptions.selectedAccountType === this.$t('label.project')) {
+        if (!OwnerOptions.selectedProject) {
+          return
+        }
+        this.owner.account = null
+        this.owner.domainid = null
+        this.owner.projectid = OwnerOptions.selectedProject
+      }
+      this.resetData()
+    },
     fetchZones (zoneId, listZoneAllow) {
       this.zones = []
       return new Promise((resolve) => {
@@ -2275,6 +2343,9 @@ export default {
         args.pageSize = args.pageSize || 10
       }
       args.zoneid = _.get(this.zone, 'id')
+      args.account = store.getters.project?.id ? null : this.owner.account
+      args.domainid = store.getters.project?.id ? null : this.owner.domainid
+      args.projectid = store.getters.project?.id || this.owner.projectid
       args.templatefilter = templateFilter
       args.details = 'all'
       args.showicon = 'true'
@@ -2531,6 +2602,7 @@ export default {
       }
     },
     resetFromTemplateConfiguration () {
+      this.deleteFrom(this.instanceConfig, ['disksize', 'rootdisksize'])
       this.deleteFrom(this.params.serviceOfferings.options, ['templateid', 'cpuspeed', 'cpunumber', 'memory'])
       this.deleteFrom(this.dataPreFill, ['cpuspeed', 'cpunumber', 'memory'])
       this.handleSearchFilter('serviceOfferings', {
diff --git a/ui/src/views/compute/wizard/OwnershipSelection.vue b/ui/src/views/compute/wizard/OwnershipSelection.vue
new file mode 100644
index 00000000000..61c30f340ac
--- /dev/null
+++ b/ui/src/views/compute/wizard/OwnershipSelection.vue
@@ -0,0 +1,257 @@
+// 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>
+  <a-form layout="vertical" >
+    <a-form-item :label="$t('label.owner.type')">
+      <a-select
+        @change="changeDomain"
+        v-model:value="selectedAccountType"
+        defaultValue="account"
+        autoFocus
+        showSearch
+        optionFilterProp="label"
+        :filterOption="
+          (input, option) => {
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }
+        "
+      >
+        <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
+        <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item :label="$t('label.domain')" required>
+      <a-select
+        @change="changeDomain"
+        v-model:value="selectedDomain"
+        showSearch
+        optionFilterProp="label"
+        :filterOption="
+          (input, option) => {
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }
+        "
+      >
+        <a-select-option
+          v-for="domain in domains"
+          :key="domain.name"
+          :value="domain.id"
+          :label="domain.path || domain.name || domain.description"
+        >
+          <span>
+            <resource-icon
+              v-if="domain && domain.icon"
+              :image="domain.icon.base64image"
+              size="1x"
+              style="margin-right: 5px"
+            />
+            <block-outlined v-else />
+            {{ domain.path || domain.name || domain.description }}
+          </span>
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+
+    <template v-if="selectedAccountType === $t('label.account')">
+      <a-form-item :label="$t('label.account')" required>
+        <a-select
+          @change="emitChangeEvent"
+          v-model:value="selectedAccount"
+          showSearch
+          optionFilterProp="label"
+          :filterOption="
+            (input, option) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }
+          "
+        >
+          <a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
+            <span>
+              <resource-icon
+                v-if="account && account.icon"
+                :image="account.icon.base64image"
+                size="1x"
+                style="margin-right: 5px"
+              />
+              <team-outlined v-else />
+              {{ account.name }}
+            </span>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </template>
+
+    <template v-else>
+      <a-form-item :label="$t('label.project')" required>
+        <a-select
+          @change="emitChangeEvent"
+          v-model:value="selectedProject"
+          showSearch
+          optionFilterProp="label"
+          :filterOption="
+            (input, option) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }
+          "
+        >
+          <a-select-option v-for="project in projects" :key="project.id" :value="project.id" :label="project.name">
+            <span>
+              <resource-icon
+                v-if="project && project.icon"
+                :image="project.icon.base64image"
+                size="1x"
+                style="margin-right: 5px"
+              />
+              <project-outlined v-else />
+              {{ project.name }}
+            </span>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </template>
+  </a-form>
+</template>
+
+<script>
+import { api } from '@/api'
+import ResourceIcon from '@/components/view/ResourceIcon.vue'
+
+export default {
+  name: 'OwnershipSelection',
+  components: { ResourceIcon },
+  data () {
+    return {
+      domains: [],
+      accounts: [],
+      projects: [],
+      selectedAccountType: this.$store.getters.project?.id ? this.$t('label.project') : this.$t('label.account'),
+      selectedDomain: null,
+      selectedAccount: null,
+      selectedProject: null,
+      loading: false
+    }
+  },
+  props: {
+    override: {
+      type: Object
+    }
+  },
+  created () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.loading = true
+      api('listDomains', {
+        response: 'json',
+        listAll: true,
+        showicon: true,
+        details: 'min'
+      })
+        .then((response) => {
+          this.domains = response.listdomainsresponse.domain
+          if (this.override) {
+            this.domains = this.domains.filter(item => this.override.domains.has(item.id))
+          }
+          if (this.domains.length === 0) {
+            this.selectedDomain = null
+            this.selectedProject = null
+            this.selectedAccount = null
+            return
+          }
+          const domainIds = this.domains?.map(domain => domain.id)
+          const ownerDomainId = this.$store.getters.project?.domainid || this.$store.getters.userInfo.domainid
+          this.selectedDomain = domainIds?.includes(ownerDomainId) ? ownerDomainId : this.domains?.[0]?.id
+          this.changeDomain()
+        })
+        .catch((error) => {
+          this.$notifyError(error)
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    fetchAccounts () {
+      this.loading = true
+      api('listAccounts', {
+        response: 'json',
+        domainId: this.selectedDomain,
+        showicon: true,
+        state: 'Enabled',
+        isrecursive: false
+      })
+        .then((response) => {
+          this.accounts = response.listaccountsresponse.account || []
+          if (this.override?.accounts && this.accounts) {
+            this.accounts = this.accounts.filter(item => this.override.accounts.has(item.name))
+          }
+          const accountNames = this.accounts.map(account => account.name)
+          if (this.selectedDomain === this.$store.getters.userInfo.domainid && accountNames.includes(this.$store.getters.userInfo.account)) {
+            this.selectedAccount = this.$store.getters.userInfo.account
+          } else {
+            this.selectedAccount = this.accounts?.[0]?.name
+          }
+          this.selectedProject = null
+          this.emitChangeEvent()
+        })
+        .catch((error) => {
+          this.$notifyError(error)
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    fetchProjects () {
+      this.loading = true
+      api('listProjects', {
+        response: 'json',
+        domainId: this.selectedDomain,
+        state: 'Active',
+        showicon: true,
+        details: 'min',
+        isrecursive: false
+      })
+        .then((response) => {
+          this.projects = response.listprojectsresponse.project
+          if (this.override?.projects && this.projects) {
+            this.projects = this.projects.filter(item => this.override.projects.has(item.id))
+          }
+          this.selectedProject = this.projects?.map(project => project.id)?.includes(this.$store.getters.project?.id) ? this.$store.getters.project?.id : this.projects?.[0]?.id
+          this.selectedAccount = null
+          this.emitChangeEvent()
+        })
+        .catch((error) => {
+          this.$notifyError(error)
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    changeDomain () {
+      if (this.selectedAccountType === this.$t('label.account')) {
+        this.fetchAccounts()
+      } else {
+        this.fetchProjects()
+      }
+    },
+    emitChangeEvent () {
+      this.$emit('fetch-owner', this)
+    }
+  }
+}
+</script>
diff --git a/ui/src/views/network/CreateIsolatedNetworkForm.vue b/ui/src/views/network/CreateIsolatedNetworkForm.vue
index 919821576e0..0c81a69057c 100644
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@@ -66,44 +66,7 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item ref="domainid" name="domainid" v-if="isAdminOrDomainAdmin()">
-            <template #label>
-              <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
-            </template>
-            <a-select
-             v-model:value="form.domainid"
-              showSearch
-              optionFilterProp="label"
-              :filterOption="(input, option) => {
-                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-              }"
-              :loading="domain.loading"
-              :placeholder="apiParams.domainid.description"
-              @change="val => { handleDomainChange(domains[val]) }">
-              <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
-                {{ opt.path || opt.name || opt.description }}
-              </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>
+          <ownership-selection v-if="isAdminOrDomainAdmin()" @fetch-owner="fetchOwnerOptions"/>
           <a-form-item
             ref="networkdomain"
             name="networkdomain"
@@ -299,28 +262,6 @@
               v-model:value="form.sourcenatipaddress"
               :placeholder="apiParams.sourcenatipaddress?.description"/>
           </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="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"
@@ -349,13 +290,15 @@ import { isAdmin, isAdminOrDomainAdmin } from '@/role'
 import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import OwnershipSelection from '@/views/compute/wizard/OwnershipSelection.vue'
 
 export default {
   name: 'CreateIsolatedNetworkForm',
   mixins: [mixinForm],
   components: {
     TooltipLabel,
-    ResourceIcon
+    ResourceIcon,
+    OwnershipSelection
   },
   props: {
     loading: {
@@ -374,13 +317,9 @@ export default {
   data () {
     return {
       actionLoading: false,
-      domains: [],
-      domain: { loading: false },
-      selectedDomain: {},
+      owner: {},
       accountVisible: isAdminOrDomainAdmin(),
-      accounts: [],
       accountLoading: false,
-      selectedAccount: {},
       zones: [],
       zoneLoading: false,
       selectedZone: {},
@@ -410,12 +349,6 @@ export default {
     this.apiParams = this.$getApiParams('createNetwork')
   },
   created () {
-    this.domains = [
-      {
-        id: '-1',
-        name: ' '
-      }
-    ]
     this.initForm()
     this.fetchData()
   },
@@ -449,7 +382,6 @@ export default {
       })
     },
     fetchData () {
-      this.fetchDomainData()
       this.fetchZoneData()
       this.allowSettingMTU()
     },
@@ -496,44 +428,31 @@ export default {
       this.publicMtuMax = zone?.routerpublicinterfacemaxmtu || 1500
       this.updateVPCCheckAndFetchNetworkOfferingData()
     },
-    fetchDomainData () {
-      if ('listDomains' in this.$store.getters.apis) {
-        this.domain.loading = true
-        this.loadMore('listDomains', 1, this.domain)
+    fetchOwnerOptions (OwnerOptions) {
+      this.owner = {
+        projectid: null,
+        domainid: this.$store.getters.userInfo.domainid,
+        account: this.$store.getters.userInfo.account
       }
-    },
-    loadMore (apiToCall, page, sema) {
-      const params = {}
-      params.listAll = true
-      params.details = 'min'
-      params.pagesize = 100
-      params.page = page
-      var count
-      api(apiToCall, params).then(json => {
-        const listDomains = json.listdomainsresponse.domain
-        count = json.listdomainsresponse.count
-        this.domains = this.domains.concat(listDomains)
-      }).finally(() => {
-        if (count <= this.domains.length) {
-          sema.loading = false
-        } else {
-          this.loadMore(apiToCall, page + 1, sema)
+      if (OwnerOptions.selectedAccountType === this.$t('label.account')) {
+        if (!OwnerOptions.selectedAccount) {
+          return
         }
-        this.form.domainid = 0
-        this.handleDomainChange(this.domains[0])
-      })
-    },
-    handleDomainChange (domain) {
-      this.selectedDomain = domain
-      this.accountVisible = domain.id !== '-1'
+        this.owner.account = OwnerOptions.selectedAccount
+        this.owner.domainid = OwnerOptions.selectedDomain
+        this.owner.projectid = null
+      } else if (OwnerOptions.selectedAccountType === this.$t('label.project')) {
+        if (!OwnerOptions.selectedProject) {
+          return
+        }
+        this.owner.account = null
+        this.owner.domainid = null
+        this.owner.projectid = OwnerOptions.selectedProject
+      }
       if (isAdminOrDomainAdmin()) {
         this.updateVPCCheckAndFetchNetworkOfferingData()
-        this.fetchAccounts()
       }
     },
-    handleAccountChange (account) {
-      this.selectedAccount = account
-    },
     updateVPCCheckAndFetchNetworkOfferingData () {
       if (this.vpc !== null) { // from VPC section
         this.fetchNetworkOfferingData(true)
@@ -562,8 +481,8 @@ export default {
         guestiptype: 'Isolated',
         state: 'Enabled'
       }
-      if (isAdminOrDomainAdmin() && this.selectedDomain.id !== '-1') { // domain is visible only for admins
-        params.domainid = this.selectedDomain.id
+      if (isAdminOrDomainAdmin() && this.owner.domainid !== '-1') { // domain is visible only for admins
+        params.domainid = this.owner.domainid
       }
       if (!isAdmin()) { // normal user is not aware of the VLANs in the system, so normal user is not allowed to create network with network offerings whose specifyvlan = true
         params.specifyvlan = false
@@ -613,31 +532,6 @@ 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(() => {
@@ -666,12 +560,15 @@ export default {
         if ('vpcid' in values) {
           params.vpcid = this.selectedVpc.id
         }
-        if ('domainid' in values && values.domainid > 0) {
-          params.domainid = this.selectedDomain.id
-          if (this.isValidTextValueForKey(values, 'account') && this.selectedAccount.id !== '-1') {
-            params.account = this.selectedAccount.name
-          }
+
+        if (this.owner.account) {
+          params.account = this.owner.account
+          params.domainid = this.owner.domainid
+        } else if (this.owner.projectid) {
+          params.domainid = this.owner.domainid
+          params.projectid = this.owner.projectid
         }
+
         api('createNetwork', params).then(json => {
           this.$notification.success({
             message: 'Network',
diff --git a/ui/src/views/network/CreateL2NetworkForm.vue b/ui/src/views/network/CreateL2NetworkForm.vue
index 6bb87e178f3..41d2ec8c2f2 100644
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@@ -73,48 +73,7 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item v-if="isAdminOrDomainAdmin()" name="domainid" ref="domainid">
-            <template #label>
-              <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
-            </template>
-            <a-select
-              v-model:value="form.domainid"
-              showSearch
-              optionFilterProp="label"
-              :filterOption="(input, option) => {
-                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-              }"
-              :loading="domainLoading"
-              :placeholder="apiParams.domainid.description"
-              @change="val => { handleDomainChange(domains[val]) }">
-              <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
-                <span>
-                  <resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
-                  <block-outlined v-else-if="optIndex !== 0" style="margin-right: 5px" />
-                  {{ opt.path || opt.name || opt.description }}
-                </span>
-              </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>
+          <ownership-selection v-if="isAdminOrDomainAdmin()" @fetch-owner="fetchOwnerOptions"/>
           <a-form-item name="networkofferingid" ref="networkofferingid">
             <template #label>
               <tooltip-label :title="$t('label.networkofferingid')" :tooltip="apiParams.networkofferingid.description"/>
@@ -217,11 +176,13 @@ import { isAdmin, isAdminOrDomainAdmin } from '@/role'
 import { mixinForm } from '@/utils/mixin'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import OwnershipSelection from '@/views/compute/wizard/OwnershipSelection.vue'
 
 export default {
   name: 'CreateL2NetworkForm',
   mixins: [mixinForm],
   components: {
+    OwnershipSelection,
     TooltipLabel,
     ResourceIcon
   },
@@ -242,13 +203,8 @@ export default {
   data () {
     return {
       actionLoading: false,
-      domains: [],
-      domainLoading: false,
-      selectedDomain: {},
+      owner: {},
       accountVisible: isAdminOrDomainAdmin(),
-      accounts: [],
-      accountLoading: false,
-      selectedAccount: {},
       zones: [],
       zoneLoading: false,
       selectedZone: {},
@@ -271,12 +227,6 @@ export default {
     this.apiParams = this.$getApiParams('createNetwork')
   },
   created () {
-    this.domains = [
-      {
-        id: '-1',
-        name: ' '
-      }
-    ]
     this.initForm()
     this.fetchData()
   },
@@ -294,7 +244,6 @@ export default {
       })
     },
     fetchData () {
-      this.fetchDomainData()
       this.fetchZoneData()
     },
     isAdminOrDomainAdmin () {
@@ -339,32 +288,31 @@ export default {
       this.isNsxEnabled = zone?.isnsxenabled || false
       this.updateVPCCheckAndFetchNetworkOfferingData()
     },
-    fetchDomainData () {
-      const params = {}
-      params.listAll = true
-      params.showicon = true
-      params.details = 'min'
-      this.domainLoading = true
-      api('listDomains', params).then(json => {
-        const listDomains = json.listdomainsresponse.domain
-        this.domains = this.domains.concat(listDomains)
-      }).finally(() => {
-        this.domainLoading = false
-        this.form.domainid = 0
-        this.handleDomainChange(this.domains[0])
-      })
-    },
-    handleDomainChange (domain) {
-      this.selectedDomain = domain
-      this.accountVisible = domain.id !== '-1'
+    fetchOwnerOptions (OwnerOptions) {
+      this.owner = {
+        projectid: null,
+        domainid: this.$store.getters.userInfo.domainid,
+        account: this.$store.getters.userInfo.account
+      }
+      if (OwnerOptions.selectedAccountType === this.$t('label.account')) {
+        if (!OwnerOptions.selectedAccount) {
+          return
+        }
+        this.owner.account = OwnerOptions.selectedAccount
+        this.owner.domainid = OwnerOptions.selectedDomain
+        this.owner.projectid = null
+      } else if (OwnerOptions.selectedAccountType === this.$t('label.project')) {
+        if (!OwnerOptions.selectedProject) {
+          return
+        }
+        this.owner.account = null
+        this.owner.domainid = null
+        this.owner.projectid = OwnerOptions.selectedProject
+      }
       if (isAdminOrDomainAdmin()) {
         this.updateVPCCheckAndFetchNetworkOfferingData()
-        this.fetchAccounts()
       }
     },
-    handleAccountChange (account) {
-      this.selectedAccount = account
-    },
     updateVPCCheckAndFetchNetworkOfferingData () {
       if (this.vpc !== null) { // from VPC section
         this.fetchNetworkOfferingData(true)
@@ -393,8 +341,8 @@ export default {
         guestiptype: 'L2',
         state: 'Enabled'
       }
-      if (isAdminOrDomainAdmin() && this.selectedDomain.id !== '-1') { // domain is visible only for admins
-        params.domainid = this.selectedDomain.id
+      if (isAdminOrDomainAdmin() && this.owner.domainid !== '-1') { // domain is visible only for admins
+        params.domainid = this.owner.domainid
       }
       if (!isAdmin()) { // normal user is not aware of the VLANs in the system, so normal user is not allowed to create network with network offerings whose specifyvlan = true
         params.specifyvlan = false
@@ -417,31 +365,6 @@ 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(() => {
@@ -460,12 +383,15 @@ export default {
         if (this.isValidValueForKey(values, 'bypassvlanoverlapcheck')) {
           params.bypassvlanoverlapcheck = values.bypassvlanoverlapcheck
         }
-        if ('domainid' in values && values.domainid > 0) {
-          params.domainid = this.selectedDomain.id
-          if (this.isValidTextValueForKey(values, 'account') && this.selectedAccount.id !== '-1') {
-            params.account = this.selectedAccount.name
-          }
+
+        if (this.owner.account) {
+          params.account = this.owner.account
+          params.domainid = this.owner.domainid
+        } else if (this.owner.projectid) {
+          params.domainid = this.owner.domainid
+          params.projectid = this.owner.projectid
         }
+
         if (this.isValidValueForKey(values, 'isolatedpvlantype') && values.isolatedpvlantype !== 'none') {
           params.isolatedpvlantype = values.isolatedpvlantype
           if (this.isValidValueForKey(values, 'isolatedpvlan')) {