ui: Remember tab on page change (#780)

* Remember tab on page change

* fix for resourceview

* Fix instance tab

* Fix vpc tab

* Fix kubernetes tab

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/components/view/ResourceView.vue

@@ -37,7 +37,7 @@
           v-else
           style="width: 100%"
           :animated="false"
-          :defaultActiveKey="tabs[0].name"
+          :activeKey="activeTab || tabs[0].name"
           @change="onTabChange" >
           <a-tab-pane
             v-for="tab in tabs"
@@ -106,11 +106,28 @@ export default {
           }
         })
       }
+    },
+    $route: function (newItem, oldItem) {
+      this.setActiveTab()
     }
   },
+  mounted () {
+    this.setActiveTab()
+  },
   methods: {
     onTabChange (key) {
       this.activeTab = key
+      const query = Object.assign({}, this.$route.query)
+      query.tab = key
+      history.replaceState(
+        {},
+        null,
+        '#' + this.$route.path + '?' + Object.keys(query).map(key => {
+          return (
+            encodeURIComponent(key) + '=' + encodeURIComponent(query[key])
+          )
+        }).join('&')
+      )
     },
     showTab (tab) {
       if ('networkServiceFilter' in tab) {
@@ -139,6 +156,9 @@ export default {
       } else {
         return true
       }
+    },
+    setActiveTab () {
+      this.activeTab = this.$route.query.tab ? this.$route.query.tab : this.tabs[0].name
     }
   }
 }

ui/src/views/compute/InstanceTab.vue

@@ -335,11 +335,31 @@ export default {
     resource: function (newItem, oldItem) {
       this.vm = newItem
       this.fetchData()
+    },
+    $route: function (newItem, oldItem) {
+      this.setCurrentTab()
     }
   },
+  mounted () {
+    this.setCurrentTab()
+  },
   methods: {
+    setCurrentTab () {
+      this.currentTab = this.$route.query.tab ? this.$route.query.tab : 'details'
+    },
     handleChangeTab (e) {
       this.currentTab = e
+      const query = Object.assign({}, this.$route.query)
+      query.tab = e
+      history.replaceState(
+        {},
+        null,
+        '#' + this.$route.path + '?' + Object.keys(query).map(key => {
+          return (
+            encodeURIComponent(key) + '=' + encodeURIComponent(query[key])
+          )
+        }).join('&')
+      )
     },
     fetchData () {
       this.volumes = []

ui/src/views/compute/KubernetesServiceTab.vue

@@ -204,9 +204,6 @@ export default {
       this.vmColumns = this.vmColumns.filter(x => x.dataIndex !== 'instancename')
     }
   },
-  mounted () {
-    this.handleFetchData()
-  },
   watch: {
     resource (newData, oldData) {
       if (newData && newData !== oldData) {
@@ -217,9 +214,33 @@ export default {
           this.vmColumns = this.vmColumns.filter(x => x.dataIndex !== 'port')
         }
       }
+    },
+    $route: function (newItem, oldItem) {
+      this.setCurrentTab()
     }
   },
+  mounted () {
+    this.handleFetchData()
+    this.setCurrentTab()
+  },
   methods: {
+    setCurrentTab () {
+      this.currentTab = this.$route.query.tab ? this.$route.query.tab : 'details'
+    },
+    handleChangeTab (e) {
+      this.currentTab = e
+      const query = Object.assign({}, this.$route.query)
+      query.tab = e
+      history.replaceState(
+        {},
+        null,
+        '#' + this.$route.path + '?' + Object.keys(query).map(key => {
+          return (
+            encodeURIComponent(key) + '=' + encodeURIComponent(query[key])
+          )
+        }).join('&')
+      )
+    },
     isAdmin () {
       return ['Admin'].includes(this.$store.getters.userInfo.roletype)
     },
@@ -235,9 +256,6 @@ export default {
     isObjectEmpty (obj) {
       return !(obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object)
     },
-    handleChangeTab (e) {
-      this.currentTab = e
-    },
     handleFetchData () {
       this.fetchKubernetesClusterConfig()
       this.fetchKubernetesVersion()

ui/src/views/network/VpcTab.vue

@@ -396,22 +396,40 @@ export default {
     this.vpnConnectionForm = this.$form.createForm(this)
     this.networkAclForm = this.$form.createForm(this)
   },
-  mounted () {
-    this.handleFetchData()
-  },
   watch: {
     loading (newData, oldData) {
       if (!newData && this.resource.id) {
         this.handleFetchData()
       }
+    },
+    $route: function (newItem, oldItem) {
+      this.setCurrentTab()
     }
   },
+  mounted () {
+    this.handleFetchData()
+    this.setCurrentTab()
+  },
   methods: {
+    setCurrentTab () {
+      this.currentTab = this.$route.query.tab ? this.$route.query.tab : 'details'
+    },
     handleChangeTab (e) {
       this.currentTab = e
       this.page = 1
       this.pageSize = 10
       this.handleFetchData()
+      const query = Object.assign({}, this.$route.query)
+      query.tab = e
+      history.replaceState(
+        {},
+        null,
+        '#' + this.$route.path + '?' + Object.keys(query).map(key => {
+          return (
+            encodeURIComponent(key) + '=' + encodeURIComponent(query[key])
+          )
+        }).join('&')
+      )
     },
     handleFetchData () {
       switch (this.currentTab) {