ui: list resources of project-owned instances outside project view

ui/src/components/header/ProjectMenu.vue

@@ -70,7 +70,7 @@ export default {
     this.unwatchProject = this.$store.watch(
       (state, getters) => getters.project?.id,
       (newId) => {
-        this.selectedProjectId = newId
+        this.selectedProjectId = newId || this.defaultOption.id
       }
     )
     eventBus.on('projects-updated', (args) => {
@@ -85,7 +85,7 @@ export default {
   methods: {
     changeProject (project) {
       this.$store.dispatch('ProjectView', project.id)
-      this.$store.dispatch('SetProject', project)
+      this.$store.dispatch('SetProject', project.id ? project : {})
       this.$store.dispatch('ToggleTheme', project.id ? 'dark' : 'light')
       this.$message.success(`${this.$t('message.switch.to')} "${project.displaytext || project.name}"`)
       if (this.$route.name !== 'dashboard') {

ui/src/components/view/InstanceVolumesStoragePoolSelectListView.vue

@@ -170,7 +170,8 @@ export default {
       this.volumes = []
       api('listVolumes', {
         listAll: true,
-        virtualmachineid: this.resource.id
+        virtualmachineid: this.resource.id,
+        projectid: this.resource.projectid
       }).then(response => {
         var volumes = response.listvolumesresponse.volume
         if (volumes && volumes.length > 0) {

ui/src/components/view/VolumesTab.vue

@@ -132,7 +132,8 @@ export default {
       }
     },
     getVolumes () {
-      api('listVolumes', { listall: true, listsystemvms: true, virtualmachineid: this.vm.id }).then(json => {
+      // Only a project instance sends its project; projectid=-1 would hide other accounts' volumes from a domain admin
+      api('listVolumes', { listall: true, listsystemvms: true, virtualmachineid: this.vm.id, projectid: this.vm.projectid }).then(json => {
         this.volumes = json.listvolumesresponse.volume
         if (this.volumes) {
           this.volumes.sort((a, b) => { return a.deviceid - b.deviceid })

ui/src/views/compute/CreateSnapshotWizard.vue

@@ -124,7 +124,7 @@ export default {
         this.hypervisorSupportsQuiesceVm = true
       }
 
-      api('listVolumes', { virtualMachineId: this.resource.id, listall: true })
+      api('listVolumes', { virtualMachineId: this.resource.id, projectid: this.resource.projectid, listall: true })
         .then(json => {
           this.listVolumes = json.listvolumesresponse.volume || []
         })

ui/src/views/compute/DestroyVM.vue

@@ -209,7 +209,8 @@ export default {
             loading: true,
             opts: []
           }
-          promises.push(this.callListVolume(vmId))
+          const vm = this.selectedItems.find(item => item.id === vmId)
+          promises.push(this.callListVolume(vmId, vm?.projectid))
         })
         Promise.all(promises).then((data) => {
           data.forEach(item => {
@@ -221,15 +222,16 @@ export default {
     },
     async fetchVolumes () {
       this.loading = true
-      const data = await this.callListVolume(this.resource.id)
+      const data = await this.callListVolume(this.resource.id, this.resource.projectid)
       this.volumes = data.volumes || []
       this.loading = false
     },
-    callListVolume (vmId) {
+    callListVolume (vmId, projectId) {
       return new Promise((resolve) => {
         this.volumes = []
         api('listVolumes', {
           virtualMachineId: vmId,
+          projectid: projectId,
           type: 'DATADISK',
           details: 'min',
           listall: 'true'

ui/src/views/compute/EditVM.vue

@@ -229,7 +229,8 @@ export default {
     fetchSecurityGroups () {
       this.securitygroups.loading = true
       api('listSecurityGroups', {
-        zoneid: this.resource.zoneid
+        zoneid: this.resource.zoneid,
+        projectid: this.resource.projectid
       }).then(json => {
         const items = json.listsecuritygroupsresponse.securitygroup || []
         if (items && items.length > 0) {
@@ -286,8 +287,9 @@ export default {
         domainid: this.$store.getters.userInfo.domainid,
         listall: true
       }
-      if (this.$store.getters.project && this.$store.getters.project.id) {
-        params.projectid = this.$store.getters.project.id
+      const projectId = this.resource.projectid || this.$store.getters.project?.id
+      if (projectId) {
+        params.projectid = projectId
       } else {
         params.account = this.$store.getters.userInfo.account
       }

ui/src/views/compute/InstanceTab.vue

@@ -51,15 +51,15 @@
         <ListResourceTable
           apiName="listVMSnapshot"
           :resource="dataResource"
-          :params="{virtualmachineid: dataResource.id}"
+          :params="{virtualmachineid: dataResource.id, projectid: dataResource.projectid}"
           :columns="['displayname', 'state', 'type', 'created']"
           :routerlinks="(record) => { return { displayname: '/vmsnapshot/' + record.id } }"/>
       </a-tab-pane>
       <a-tab-pane :tab="$t('label.backup')" key="backups" v-if="'listBackups' in $store.getters.apis">
         <ListResourceTable
           apiName="listBackups"
           :resource="resource"
-          :params="{virtualmachineid: dataResource.id}"
+          :params="{virtualmachineid: dataResource.id, projectid: dataResource.projectid}"
           :columns="['created', 'status', 'type', 'size', 'virtualsize']"
           :routerlinks="(record) => { return { created: '/backup/' + record.id } }"
           :showSearch="false"/>
@@ -106,6 +106,7 @@
       @cancel="closeModals">
       <security-group-selection
         :zoneId="this.vm.zoneid"
+        :projectId="this.vm.projectid"
         :value="securitygroupids"
         :loading="false"
         :preFillContent="dataPreFill"

ui/src/views/compute/MigrateWizard.vue

@@ -306,7 +306,8 @@ export default {
       this.volumes = []
       api('listVolumes', {
         listAll: true,
-        virtualmachineid: this.resource.id
+        virtualmachineid: this.resource.id,
+        projectid: this.resource.projectid
       }).then(response => {
         this.volumes = response?.listvolumesresponse?.volume || []
       }).finally(() => {

ui/src/views/compute/wizard/SecurityGroupSelection.vue

@@ -75,6 +75,10 @@ export default {
     preFillContent: {
       type: Object,
       default: () => {}
+    },
+    projectId: {
+      type: String,
+      default: null
     }
   },
   data () {
@@ -139,10 +143,11 @@ export default {
   },
   methods: {
     fetchData () {
+      const projectId = this.projectId || this.$store.getters.project?.id
       const params = {
-        projectid: this.$store.getters.project ? this.$store.getters.project.id : null,
-        domainid: this.$store.getters.project && this.$store.getters.project.id ? null : this.$store.getters.userInfo.domainid,
-        account: this.$store.getters.project && this.$store.getters.project.id ? null : this.$store.getters.userInfo.account,
+        projectid: projectId || null,
+        domainid: projectId ? null : this.$store.getters.userInfo.domainid,
+        account: projectId ? null : this.$store.getters.userInfo.account,
         page: this.page,
         pageSize: this.pageSize
       }

ui/src/views/network/NicsTab.vue

@@ -308,10 +308,11 @@ export default {
       api('listNetworks', {
         listAll: 'true',
         showicon: true,
-        zoneid: this.vm.zoneid
+        zoneid: this.vm.zoneid,
+        projectid: this.vm.projectid
       }).then(response => {
-        this.addNetworkData.allNetworks = response.listnetworksresponse.network.filter(network => !this.vm.nic.map(nic => nic.networkid).includes(network.id))
-        this.addNetworkData.network = this.addNetworkData.allNetworks[0].id
+        this.addNetworkData.allNetworks = (response.listnetworksresponse.network || []).filter(network => !this.vm.nic.map(nic => nic.networkid).includes(network.id))
+        this.addNetworkData.network = this.addNetworkData.allNetworks[0]?.id
       })
     },
     fetchSecondaryIPs (nicId) {

ui/tests/unit/components/header/ProjectMenu.spec.js

@@ -0,0 +1,94 @@
+// 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.
+
+import { mount, flushPromises } from '@vue/test-utils'
+import { createStore } from 'vuex'
+
+import common from '../../../common'
+import ProjectMenu from '@/components/header/ProjectMenu.vue'
+
+const i18n = common.createMockI18n('en', {
+  en: { 'label.default.view': 'Default view', 'message.switch.to': 'Switched to' }
+})
+const project = { id: 'project-1', name: 'Project 1', displaytext: 'Project 1' }
+let store
+let actions
+
+const createStoreWithProject = (current) => {
+  actions = {
+    ProjectView: jest.fn(),
+    ToggleTheme: jest.fn()
+  }
+  return createStore({
+    state: { user: { project: current, apis: { listProjects: {} } } },
+    getters: {
+      project: state => state.user.project,
+      apis: state => state.user.apis
+    },
+    mutations: {
+      SET_PROJECT: (state, project) => { state.user.project = project }
+    },
+    actions: {
+      ...actions,
+      SetProject: ({ commit }, project) => commit('SET_PROJECT', project)
+    }
+  })
+}
+
+const mountMenu = () => mount(ProjectMenu, {
+  global: {
+    plugins: [store, i18n],
+    stubs: { InfiniteScrollSelect: true },
+    mocks: {
+      $message: { success: jest.fn() },
+      $route: { name: 'dashboard' },
+      $router: { push: jest.fn() }
+    }
+  }
+})
+
+const selectOption = async (wrapper, option) => {
+  wrapper.findComponent({ name: 'InfiniteScrollSelect' }).vm.$emit('change-option', option)
+  await flushPromises()
+}
+
+describe('Components > Header > ProjectMenu.vue', () => {
+  it('stores the selected project', async () => {
+    store = createStoreWithProject({})
+    const wrapper = mountMenu()
+
+    await selectOption(wrapper, project)
+
+    expect(store.getters.project).toEqual(project)
+    expect(wrapper.vm.selectedProjectId).toBe(project.id)
+    wrapper.unmount()
+  })
+
+  it('stores no project when switching back to Default view', async () => {
+    store = createStoreWithProject(project)
+    const wrapper = mountMenu()
+    expect(wrapper.vm.selectedProjectId).toBe(project.id)
+
+    await selectOption(wrapper, wrapper.vm.defaultOption)
+
+    expect(store.getters.project).toEqual({})
+    expect(store.getters.project.id).toBeUndefined()
+    expect(wrapper.vm.selectedProjectId).toBe(wrapper.vm.defaultOption.id)
+    expect(actions.ToggleTheme).toHaveBeenLastCalledWith(expect.anything(), 'light')
+    wrapper.unmount()
+  })
+})