[cloudstack-primate] branch master updated: dashboard: refresh on project change, fix project handlers

[ro...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git


The following commit(s) were added to refs/heads/master by this push:
     new a783141  dashboard: refresh on project change, fix project handlers
a783141 is described below

commit a7831413c6fe3cb1a650b41229dcfcc9f6a31584
Author: Rohit Yadav <ro...@shapeblue.com>
AuthorDate: Wed Jun 10 13:39:30 2020 +0530

    dashboard: refresh on project change, fix project handlers
    
    Signed-off-by: Rohit Yadav <ro...@shapeblue.com>
---
 src/components/header/ProjectMenu.vue  | 17 +++++++++++++----
 src/store/modules/user.js              |  2 +-
 src/views/dashboard/Dashboard.vue      | 11 +++++++----
 src/views/dashboard/UsageDashboard.vue |  8 ++++++++
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/header/ProjectMenu.vue b/src/components/header/ProjectMenu.vue
index bddbf3f..25c6c23 100644
--- a/src/components/header/ProjectMenu.vue
+++ b/src/components/header/ProjectMenu.vue
@@ -20,7 +20,7 @@
     <a-select
       class="project-select"
       defaultValue="Default View"
-      :value="$store.getters.project.displaytext || $store.getters.project.name || 'Default View'"
+      :value="('id' in $store.getters.project) ? ($store.getters.project.displaytext || $store.getters.project.name) : 'Default View'"
       :disabled="isDisabled()"
       :filterOption="filterProject"
       @change="changeProject"
@@ -31,7 +31,10 @@
         <template slot="title">
           <span>{{ $t('label.projects') }}</span>
         </template>
-        <a-icon style="font-size: 20px; color: #999; margin-top: -5px" type="project" />
+        <span style="font-size: 20px; color: #999; margin-top: -5px">
+          <a-icon v-if="!loading" type="project" />
+          <a-icon v-else type="loading" />
+        </span>
       </a-tooltip>
 
       <a-select-option v-for="(project, index) in projects" :key="index">
@@ -49,7 +52,8 @@ export default {
   name: 'ProjectMenu',
   data () {
     return {
-      projects: []
+      projects: [],
+      loading: false
     }
   },
   mounted () {
@@ -62,6 +66,7 @@ export default {
       }
       var page = 1
       const getNextPage = () => {
+        this.loading = true
         api('listProjects', { listAll: true, details: 'min', page: page, pageSize: 500 }).then(json => {
           if (page === 1) {
             this.projects = [{ name: 'Default View' }]
@@ -73,6 +78,8 @@ export default {
             page++
             getNextPage()
           }
+        }).finally(() => {
+          this.loading = false
         })
       }
       getNextPage()
@@ -85,7 +92,9 @@ export default {
       this.$store.dispatch('SetProject', project)
       this.$store.dispatch('ToggleTheme', project.id === undefined ? 'light' : 'dark')
       this.$message.success(`Switched to "${project.name}"`)
-      this.$router.push({ name: 'dashboard' })
+      if (this.$route.name !== 'dashboard') {
+        this.$router.push({ name: 'dashboard' })
+      }
     },
     filterProject (input, option) {
       return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index ad7497c..10c56db 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -42,7 +42,7 @@ const user = {
     SET_TOKEN: (state, token) => {
       state.token = token
     },
-    SET_PROJECT: (state, project) => {
+    SET_PROJECT: (state, project = {}) => {
       Vue.ls.set(CURRENT_PROJECT, project)
       state.project = project
     },
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 0147b4f..8f86c67 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -45,14 +45,17 @@ export default {
   },
   mounted () {
     this.showCapacityDashboard = Object.prototype.hasOwnProperty.call(store.getters.apis, 'listCapacity')
-    this.project = store.getters.project !== undefined && store.getters.project.id !== undefined
+    this.project = false
+    if (store.getters.project && store.getters.project.id) {
+      this.project = true
+    }
     this.$store.watch(
       (state, getters) => getters.project,
       (newValue, oldValue) => {
-        if (newValue === undefined || newValue.id === undefined) {
-          this.project = false
-        } else {
+        if (newValue && newValue.id) {
           this.project = true
+        } else {
+          this.project = false
         }
       }
     )
diff --git a/src/views/dashboard/UsageDashboard.vue b/src/views/dashboard/UsageDashboard.vue
index 6bba43b..f3f8c16 100644
--- a/src/views/dashboard/UsageDashboard.vue
+++ b/src/views/dashboard/UsageDashboard.vue
@@ -122,6 +122,14 @@ export default {
   mounted () {
     this.project = store.getters.project
     this.fetchData()
+    this.$store.watch(
+      (state, getters) => getters.project,
+      (newValue, oldValue) => {
+        if (newValue && newValue.id) {
+          this.fetchData()
+        }
+      }
+    )
   },
   watch: {
     '$route' (to, from) {