ui: update treeview when clicking the refresh button (#4999)

Fixes #4975
When a domain is generated by another client, the treeview is modified when clicking the refresh button.

Author: Hoang Nguyen

ui/src/components/view/TreeView.vue

@@ -117,12 +117,6 @@ export default {
       type: Boolean,
       default: false
     },
-    actionData: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
     treeStore: {
       type: Object,
       default () {
@@ -163,22 +157,15 @@ export default {
   watch: {
     loading () {
       this.detailLoading = this.loading
-    },
-    treeData () {
-      if (this.oldTreeViewData.length === 0) {
+      this.treeViewData = []
+      this.arrExpand = []
+      if (!this.loading) {
         this.treeViewData = this.treeData
         this.treeVerticalData = this.treeData
-      }
-
-      if (this.treeViewData.length > 0) {
-        this.oldTreeViewData = this.treeViewData
-        this.rootKey = this.treeViewData[0].key
-      }
 
-      if (Object.keys(this.resource).length > 0) {
-        const resourceIndex = this.treeVerticalData.findIndex(item => item.id === this.resource.id)
-        if (resourceIndex === -1) {
-          this.$el.querySelector(`[title=${this.resource.parentdomainname}]`).click()
+        if (this.treeViewData.length > 0) {
+          this.oldTreeViewData = this.treeViewData
+          this.rootKey = this.treeViewData[0].key
         }
       }
     },
@@ -213,13 +200,6 @@ export default {
         this.defaultSelected.push(arrSelected[0])
       }
     },
-    actionData (newData, oldData) {
-      if (!newData || newData.length === 0) {
-        return
-      }
-
-      this.reloadTreeData(newData)
-    },
     treeVerticalData () {
       if (!this.treeStore.isExpand) {
         return
@@ -233,25 +213,6 @@ export default {
           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: {
@@ -297,10 +258,36 @@ export default {
             }
           }
 
+          this.onSelectResource()
           resolve()
         })
       })
     },
+    onSelectResource () {
+      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 resourceIdx = this.treeVerticalData.findIndex(item => item.id === this.resource.id)
+          const parentIndex = this.treeVerticalData.findIndex(item => item.id === this.resource.parentdomainid)
+          if (resourceIdx !== -1) {
+            this.resource = this.treeVerticalData[resourceIdx]
+          } else if (parentIndex !== 1) {
+            this.resource = this.treeVerticalData[parentIndex]
+          } else {
+            this.resource = this.treeVerticalData[0]
+          }
+          this.selectedTreeKey = this.resource.key
+          this.defaultSelected = [this.selectedTreeKey]
+          this.$emit('change-resource', this.resource)
+        }
+      }
+    },
     onSelect (selectedKeys, event) {
       if (!event.selected) {
         setTimeout(() => { event.node.$refs.selectHandle.click() })
@@ -398,53 +385,6 @@ export default {
     onTabChange (key) {
       this.tabActive = key
     },
-    reloadTreeData (objData) {
-      if (objData && objData[0].isDel) {
-        this.treeVerticalData = this.treeVerticalData.filter(item => item.id !== objData[0].id)
-        this.treeVerticalData = this.treeVerticalData.filter(item => item.parentdomainid !== objData[0].id)
-      } else {
-        // data response from action
-        let jsonResponse = this.getResponseJsonData(objData[0])
-        jsonResponse = this.createResourceData(jsonResponse)
-
-        // resource for check create or edit
-        const resource = this.treeVerticalData.filter(item => item.id === jsonResponse.id)
-
-        // when edit
-        if (resource && resource[0]) {
-          this.treeVerticalData.filter((item, index) => {
-            if (item.id === jsonResponse.id) {
-              // replace all value of tree data
-              Object.keys(jsonResponse).forEach((value, idx) => {
-                this.$set(this.treeVerticalData[index], value, jsonResponse[value])
-              })
-            }
-          })
-        } else {
-          // when create
-          let resourceExists = true
-
-          // check is searching data
-          if (this.searchQuery !== '') {
-            resourceExists = jsonResponse.title.indexOf(this.searchQuery) > -1
-          }
-
-          // push new resource to tree data
-          if (this.resource.haschild && resourceExists) {
-            this.treeVerticalData.push(jsonResponse)
-          }
-
-          // set resource is currently active as a parent
-          this.treeVerticalData.filter((item, index) => {
-            if (item.id === this.resource.id) {
-              this.$set(this.treeVerticalData[index], 'isLeaf', false)
-              this.$set(this.treeVerticalData[index], 'haschild', true)
-            }
-          })
-        }
-      }
-      this.recursiveTreeData(this.treeVerticalData)
-    },
     getDetailResource (selectedKey) {
       // set api name and parameter
       const apiName = this.$route.meta.permission[0]

ui/src/views/iam/DomainActionForm.vue

@@ -169,16 +169,12 @@ export default {
       this.fillEditFormFieldValues()
     }
   },
-  inject: ['parentCloseAction', 'parentFetchData', 'parentUpdActionData'],
+  inject: ['parentCloseAction', 'parentFetchData'],
   methods: {
     pollActionCompletion (jobId, action) {
       this.$pollJob({
         jobId,
         successMethod: result => {
-          if (this.action.api === 'deleteDomain') {
-            this.$set(this.resource, 'isDel', true)
-            this.parentUpdActionData(this.resource)
-          }
           this.parentFetchData()
           if (action.response) {
             const description = action.response(result.jobresult)
@@ -283,7 +279,6 @@ export default {
               key: this.action.label + resourceName,
               duration: duration
             })
-            this.parentUpdActionData(json)
             this.parentFetchData()
           }
           this.parentCloseAction()

ui/src/views/iam/DomainView.vue

@@ -66,8 +66,7 @@
         :loading="loading"
         :tabs="$route.meta.tabs"
         @change-resource="changeResource"
-        @change-tree-store="changeDomainStore"
-        :actionData="actionData"/>
+        @change-tree-store="changeDomainStore"/>
     </div>
 
     <div v-if="showAction">
@@ -106,7 +105,6 @@ export default {
       loading: false,
       selectedRowKeys: [],
       treeData: [],
-      actionData: [],
       treeSelected: {},
       showAction: false,
       action: {},
@@ -154,7 +152,6 @@ export default {
   provide () {
     return {
       parentCloseAction: this.closeAction,
-      parentUpdActionData: this.updateActionData,
       parentFetchData: this.fetchData
     }
   },
@@ -317,9 +314,6 @@ export default {
     },
     closeAction () {
       this.showAction = false
-    },
-    updateActionData (data) {
-      this.actionData.push(data)
     }
   }
 }