ui: Save and auto-expand list domain when reloading (#4769)

* save and auto-expand list domain when reloading

* fix for simplify the code

* clear variables, prop of common component

* fix lint errors found

Author: Hoang Nguyen

ui/src/components/view/TreeView.vue

@@ -36,11 +36,11 @@
             :loadData="onLoadData"
             :expandAction="false"
             :showIcon="true"
-            :defaultSelectedKeys="defaultSelected"
+            :selectedKeys="defaultSelected"
             :checkStrictly="true"
             @select="onSelect"
             @expand="onExpand"
-            :defaultExpandedKeys="arrExpand">
+            :expandedKeys="arrExpand">
             <a-icon slot="parent" type="folder" />
             <a-icon slot="leaf" type="block" />
           </a-tree>
@@ -122,6 +122,12 @@ export default {
       default () {
         return []
       }
+    },
+    treeStore: {
+      type: Object,
+      default () {
+        return {}
+      }
     }
   },
   data () {
@@ -213,6 +219,39 @@ export default {
       }
 
       this.reloadTreeData(newData)
+    },
+    treeVerticalData () {
+      if (!this.treeStore.isExpand) {
+        return
+      }
+      if (this.treeStore.expands && this.treeStore.expands.length > 0) {
+        for (const expandKey of this.treeStore.expands) {
+          if (this.arrExpand.includes(expandKey)) {
+            continue
+          }
+          const keyVisible = this.treeVerticalData.findIndex(item => item.key === expandKey)
+          if (keyVisible > -1) this.arrExpand.push(expandKey)
+        }
+      }
+
+      if (this.treeStore.selected) {
+        this.selectedTreeKey = this.treeStore.selected
+        this.defaultSelected = [this.selectedTreeKey]
+
+        const resource = this.treeVerticalData.filter(item => item.id === this.selectedTreeKey)
+        if (resource.length > 0) {
+          this.resource = resource[0]
+          this.$emit('change-resource', this.resource)
+        } else {
+          const rootResource = this.treeVerticalData[0]
+          if (rootResource) {
+            this.resource = rootResource
+            this.selectedTreeKey = this.resource.key
+            this.defaultSelected = [this.selectedTreeKey]
+            this.$emit('change-resource', this.resource)
+          }
+        }
+      }
     }
   },
   methods: {
@@ -273,10 +312,21 @@ export default {
         this.selectedTreeKey = selectedKeys[0]
       }
 
+      this.defaultSelected = []
+      this.defaultSelected.push(this.selectedTreeKey)
+
+      this.treeStore.expands = this.arrExpand
+      this.treeStore.selected = this.selectedTreeKey
+      this.$emit('change-tree-store', this.treeStore)
+
       this.getDetailResource(this.selectedTreeKey)
     },
     onExpand (treeExpand) {
       this.arrExpand = treeExpand
+      this.treeStore.isExpand = true
+      this.treeStore.expands = this.arrExpand
+      this.treeStore.selected = this.selectedTreeKey
+      this.$emit('change-tree-store', this.treeStore)
     },
     onSearch (value) {
       if (this.searchQuery === '' && this.oldSearchQuery === '') {
@@ -303,6 +353,7 @@ export default {
       this.arrExpand = []
       this.treeViewData = []
       this.loadingSearch = true
+      this.$emit('change-tree-store', {})
 
       api(this.apiList, params).then(json => {
         const listDomains = this.getResponseJsonData(json)

ui/src/store/getters.js

@@ -35,7 +35,8 @@ const getters = {
   cloudian: state => state.user.cloudian,
   zones: state => state.user.zones,
   timezoneoffset: state => state.user.timezoneoffset,
-  usebrowsertimezone: state => state.user.usebrowsertimezone
+  usebrowsertimezone: state => state.user.usebrowsertimezone,
+  domainStore: state => state.user.domainStore
 }
 
 export default getters

ui/src/store/modules/user.js

@@ -24,7 +24,17 @@ import router from '@/router'
 import store from '@/store'
 import { login, logout, api } from '@/api'
 import { i18n } from '@/locales'
-import { ACCESS_TOKEN, CURRENT_PROJECT, DEFAULT_THEME, APIS, ASYNC_JOB_IDS, ZONES, TIMEZONE_OFFSET, USE_BROWSER_TIMEZONE } from '@/store/mutation-types'
+import {
+  ACCESS_TOKEN,
+  CURRENT_PROJECT,
+  DEFAULT_THEME,
+  APIS,
+  ZONES,
+  TIMEZONE_OFFSET,
+  USE_BROWSER_TIMEZONE,
+  ASYNC_JOB_IDS,
+  DOMAIN_STORE
+} from '@/store/mutation-types'
 
 const user = {
   state: {
@@ -40,7 +50,8 @@ const user = {
     cloudian: {},
     zones: {},
     timezoneoffset: 0.0,
-    usebrowsertimezone: false
+    usebrowsertimezone: false,
+    domainStore: {}
   },
 
   mutations: {
@@ -91,6 +102,10 @@ const user = {
     SET_ZONES: (state, zones) => {
       state.zones = zones
       Vue.ls.set(ZONES, zones)
+    },
+    SET_DOMAIN_STORE (state, domainStore) {
+      state.domainStore = domainStore
+      Vue.ls.set(DOMAIN_STORE, domainStore)
     }
   },
 
@@ -126,6 +141,7 @@ const user = {
           commit('SET_FEATURES', {})
           commit('SET_LDAP', {})
           commit('SET_CLOUDIAN', {})
+          commit('SET_DOMAIN_STORE', {})
 
           notification.destroy()
 
@@ -142,7 +158,10 @@ const user = {
         const cachedZones = Vue.ls.get(ZONES, [])
         const cachedTimezoneOffset = Vue.ls.get(TIMEZONE_OFFSET, 0.0)
         const cachedUseBrowserTimezone = Vue.ls.get(USE_BROWSER_TIMEZONE, false)
+        const domainStore = Vue.ls.get(DOMAIN_STORE, {})
         const hasAuth = Object.keys(cachedApis).length > 0
+
+        commit('SET_DOMAIN_STORE', domainStore)
         if (hasAuth) {
           console.log('Login detected, using cached APIs')
           commit('SET_ZONES', cachedZones)
@@ -250,6 +269,7 @@ const user = {
         commit('SET_LDAP', {})
         commit('SET_CLOUDIAN', {})
         commit('RESET_THEME')
+        commit('SET_DOMAIN_STORE', {})
         Vue.ls.remove(CURRENT_PROJECT)
         Vue.ls.remove(ACCESS_TOKEN)
         Vue.ls.remove(ASYNC_JOB_IDS)
@@ -304,6 +324,10 @@ const user = {
           reject(error)
         })
       })
+    },
+
+    SetDomainStore ({ commit }, domainStore) {
+      commit('SET_DOMAIN_STORE', domainStore)
     }
   }
 }

ui/src/store/mutation-types.js

@@ -32,6 +32,7 @@ export const ZONES = 'ZONES'
 export const ASYNC_JOB_IDS = 'ASYNC_JOB_IDS'
 export const TIMEZONE_OFFSET = 'TIMEZONE_OFFSET'
 export const USE_BROWSER_TIMEZONE = 'USE_BROWSER_TIMEZONE'
+export const DOMAIN_STORE = 'DOMAIN_STORE'
 
 export const CONTENT_WIDTH_TYPE = {
   Fluid: 'Fluid',

ui/src/views/iam/DomainView.vue

@@ -62,9 +62,11 @@
         v-else
         :treeData="treeData"
         :treeSelected="treeSelected"
+        :treeStore="domainStore"
         :loading="loading"
         :tabs="$route.meta.tabs"
         @change-resource="changeResource"
+        @change-tree-store="changeDomainStore"
         :actionData="actionData"/>
     </div>
 
@@ -108,7 +110,8 @@ export default {
       treeSelected: {},
       showAction: false,
       action: {},
-      dataView: false
+      dataView: false,
+      domainStore: {}
     }
   },
   computed: {
@@ -129,9 +132,11 @@ export default {
     next()
   },
   beforeRouteLeave (to, from, next) {
+    this.changeDomainStore({})
     next()
   },
   created () {
+    this.domainStore = store.getters.domainStore
     this.fetchData()
   },
   watch: {
@@ -306,6 +311,10 @@ export default {
       this.treeSelected = resource
       this.resource = this.treeSelected
     },
+    changeDomainStore (domainStore) {
+      this.domainStore = domainStore
+      store.dispatch('SetDomainStore', domainStore)
+    },
     closeAction () {
       this.showAction = false
     },