ui: make events tab selected columns persistent using cache (#11317)

Fixes #10308

Signed-off-by: Abhishek Kumar <[email protected]>

Author: shwstppr

ui/src/components/view/EventsTab.vue

@@ -52,6 +52,8 @@ import { getAPI } from '@/api'
 import { genericCompare } from '@/utils/sort.js'
 import ListView from '@/components/view/ListView'
 
+const EVENTS_TAB_COLUMNS_KEY = 'events_tab_columns'
+
 export default {
   name: 'EventsTab',
   components: {
@@ -98,8 +100,7 @@ export default {
     }
   },
   created () {
-    this.selectedColumnKeys = this.columnKeys
-    this.updateSelectedColumns('description')
+    this.setDefaultColumns()
     this.pageSize = this.pageSizeOptions[0] * 1
     this.fetchData()
   },
@@ -111,6 +112,15 @@ export default {
     }
   },
   methods: {
+    setDefaultColumns () {
+      const savedColumns = this.$localStorage.get(EVENTS_TAB_COLUMNS_KEY)
+      if (savedColumns && Array.isArray(savedColumns) && savedColumns.length > 0) {
+        this.selectedColumnKeys = savedColumns
+      } else {
+        this.selectedColumnKeys = this.columnKeys.filter(x => x !== 'description')
+      }
+      this.updateColumns()
+    },
     fetchData () {
       this.fetchEvents()
     },
@@ -145,6 +155,7 @@ export default {
       } else {
         this.selectedColumnKeys.push(key)
       }
+      this.$localStorage.set(EVENTS_TAB_COLUMNS_KEY, this.selectedColumnKeys)
       this.updateColumns()
     },
     updateColumns () {