Add toggle button on the UI for list including elements in projects. (#5790)

* Allow to use projectid=-1 and list all resources (e.g. VMs) regardless of their project.

ui/src/store/getters.js

@@ -30,6 +30,7 @@ const getters = {
   userInfo: state => state.user.info,
   addRouters: state => state.permission.addRouters,
   multiTab: state => state.app.multiTab,
+  listAllProjects: state => state.app.listAllProjects,
   headerNotices: state => state.user.headerNotices,
   isLdapEnabled: state => state.user.isLdapEnabled,
   cloudian: state => state.user.cloudian,

ui/src/store/modules/app.js

@@ -46,6 +46,7 @@ const app = {
     inverted: true,
     multiTab: true,
     metrics: false,
+    listAllProjects: false,
     server: ''
   },
   mutations: {
@@ -99,6 +100,9 @@ const app = {
     SET_METRICS: (state, bool) => {
       state.metrics = bool
     },
+    SET_LIST_ALL_PROJECTS: (state, bool) => {
+      state.listAllProjects = bool
+    },
     SET_USE_BROWSER_TIMEZONE: (state, bool) => {
       Vue.ls.set(USE_BROWSER_TIMEZONE, bool)
       state.usebrowsertimezone = bool
@@ -151,6 +155,9 @@ const app = {
     SetMetrics ({ commit }, bool) {
       commit('SET_METRICS', bool)
     },
+    SetListAllProjects ({ commit }, bool) {
+      commit('SET_LIST_ALL_PROJECTS', bool)
+    },
     SetUseBrowserTimezone ({ commit }, bool) {
       commit('SET_USE_BROWSER_TIMEZONE', bool)
     },

ui/src/views/AutogenView.vue

@@ -39,6 +39,13 @@
                   :un-checked-children="$t('label.metrics')"
                   :checked="$store.getters.metrics"
                   @change="(checked, event) => { $store.dispatch('SetMetrics', checked) }"/>
+                <a-switch
+                  v-if="!projectView && hasProjectId"
+                  style="margin-left: 8px"
+                  :checked-children="$t('label.projects')"
+                  :un-checked-children="$t('label.projects')"
+                  :checked="$store.getters.listAllProjects"
+                  @change="(checked, event) => { $store.dispatch('SetListAllProjects', checked) }"/>
                 <a-tooltip placement="right">
                   <template slot="title">
                     {{ $t('label.filterby') }}
@@ -504,6 +511,7 @@ export default {
       showAction: false,
       dataView: false,
       projectView: false,
+      hasProjectId: false,
       selectedFilter: '',
       filters: [],
       searchFilters: [],
@@ -634,6 +642,9 @@ export default {
     },
     '$store.getters.metrics' (oldVal, newVal) {
       this.fetchData()
+    },
+    '$store.getters.listAllProjects' (oldVal, newVal) {
+      this.fetchData()
     }
   },
   computed: {
@@ -740,6 +751,7 @@ export default {
       }
 
       this.projectView = Boolean(store.getters.project && store.getters.project.id)
+      this.hasProjectId = ['vm', 'vmgroup', 'ssh', 'affinitygroup', 'volume', 'snapshot', 'vmsnapshot', 'guestnetwork', 'vpc', 'securitygroups', 'publicip', 'vpncustomergateway', 'template', 'iso', 'event'].includes(this.$route.name)
 
       if ((this.$route && this.$route.params && this.$route.params.id) || this.$route.query.dataView) {
         this.dataView = true
@@ -831,6 +843,10 @@ export default {
         }
       }
 
+      if (this.$store.getters.listAllProjects && !this.projectView) {
+        params.projectid = '-1'
+      }
+
       params.page = this.page
       params.pagesize = this.pageSize