diff --git a/ui/src/components/view/TreeView.vue b/ui/src/components/view/TreeView.vue index 4c0bcce36d07..2b763ba487fb 100644 --- a/ui/src/components/view/TreeView.vue +++ b/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"> @@ -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) diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js index 4e2d5eb21a60..359dccc7c6f7 100644 --- a/ui/src/store/getters.js +++ b/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 diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js index 9ed40e38c443..ff29b75700a8 100644 --- a/ui/src/store/modules/user.js +++ b/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) } } } diff --git a/ui/src/store/mutation-types.js b/ui/src/store/mutation-types.js index 9d735610e072..01a9755cb58f 100644 --- a/ui/src/store/mutation-types.js +++ b/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', diff --git a/ui/src/views/iam/DomainView.vue b/ui/src/views/iam/DomainView.vue index c9f1311eddc7..c9747970822d 100644 --- a/ui/src/views/iam/DomainView.vue +++ b/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"/> @@ -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 },