Skip to content

Commit b9e973a

Browse files
davidjumanidavidjumani
authored
ui: Adding option to select columns to display (#6001)
1 parent 2a1a012 commit b9e973a

6 files changed

Lines changed: 86 additions & 7 deletions

File tree

‎ui/public/locales/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,7 @@
598598
"label.clustertype": "Cluster Type",
599599
"label.clvm": "CLVM",
600600
"label.code": "Code",
601+
"label.columns": "Columns",
601602
"label.comma.separated.list.description": "Enter comma-separated list of commands",
602603
"label.comments": "Comments",
603604
"label.community": "Community",

‎ui/src/store/getters.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ const getters = {
4242
darkMode: state => state.user.darkMode,
4343
themeSetting: state => state.user.themeSetting,
4444
defaultListViewPageSize: state => state.user.defaultListViewPageSize,
45-
countNotify: state => state.user.countNotify
45+
countNotify: state => state.user.countNotify,
46+
customColumns: state => state.user.customColumns
4647
}
4748

4849
export default getters

‎ui/src/store/modules/app.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ import {
2828
DEFAULT_CONTENT_WIDTH_TYPE,
2929
DEFAULT_MULTI_TAB,
3030
USE_BROWSER_TIMEZONE,
31-
SERVER_MANAGER
31+
SERVER_MANAGER,
32+
CUSTOM_COLUMNS
3233
} from '@/store/mutation-types'
3334

3435
const app = {
@@ -110,6 +111,10 @@ const app = {
110111
SET_SERVER: (state, server) => {
111112
Vue.ls.set(SERVER_MANAGER, server)
112113
state.server = server
114+
},
115+
SET_CUSTOM_COLUMNS: (state, customColumns) => {
116+
Vue.ls.set(CUSTOM_COLUMNS, customColumns)
117+
state.customColumns = customColumns
113118
}
114119
},
115120
actions: {
@@ -163,6 +168,9 @@ const app = {
163168
},
164169
SetServer ({ commit }, server) {
165170
commit('SET_SERVER', server)
171+
},
172+
SetCustomColumns ({ commit }, bool) {
173+
commit('SET_CUSTOM_COLUMNS', bool)
166174
}
167175
}
168176
}

‎ui/src/store/modules/user.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ import {
3434
HEADER_NOTICES,
3535
DOMAIN_STORE,
3636
DARK_MODE,
37-
THEME_SETTING
37+
THEME_SETTING,
38+
CUSTOM_COLUMNS
3839
} from '@/store/mutation-types'
3940

4041
const user = {
@@ -125,6 +126,10 @@ const user = {
125126
},
126127
SET_COUNT_NOTIFY (state, number) {
127128
state.countNotify = number
129+
},
130+
SET_CUSTOM_COLUMNS: (state, customColumns) => {
131+
Vue.ls.set(CUSTOM_COLUMNS, customColumns)
132+
state.customColumns = customColumns
128133
}
129134
},
130135

@@ -154,6 +159,8 @@ const user = {
154159
commit('SET_DARK_MODE', darkMode)
155160
const themeSetting = Vue.ls.get(THEME_SETTING, {})
156161
commit('SET_THEME_SETTING', themeSetting)
162+
const cachedCustomColumns = Vue.ls.get(CUSTOM_COLUMNS, {})
163+
commit('SET_CUSTOM_COLUMNS', cachedCustomColumns)
157164

158165
commit('SET_APIS', {})
159166
commit('SET_NAME', '')
@@ -181,6 +188,7 @@ const user = {
181188
const cachedZones = Vue.ls.get(ZONES, [])
182189
const cachedTimezoneOffset = Vue.ls.get(TIMEZONE_OFFSET, 0.0)
183190
const cachedUseBrowserTimezone = Vue.ls.get(USE_BROWSER_TIMEZONE, false)
191+
const cachedCustomColumns = Vue.ls.get(CUSTOM_COLUMNS, {})
184192
const domainStore = Vue.ls.get(DOMAIN_STORE, {})
185193
const darkMode = Vue.ls.get(DARK_MODE, false)
186194
const themeSetting = Vue.ls.get(THEME_SETTING, {})
@@ -195,6 +203,7 @@ const user = {
195203
commit('SET_APIS', cachedApis)
196204
commit('SET_TIMEZONE_OFFSET', cachedTimezoneOffset)
197205
commit('SET_USE_BROWSER_TIMEZONE', cachedUseBrowserTimezone)
206+
commit('SET_CUSTOM_COLUMNS', cachedCustomColumns)
198207

199208
// Ensuring we get the user info so that store.getters.user is never empty when the page is freshly loaded
200209
api('listUsers', { username: Cookies.get('username'), listall: true }).then(response => {

‎ui/src/store/mutation-types.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export const SERVER_MANAGER = 'SERVER_MANAGER'
3636
export const DOMAIN_STORE = 'DOMAIN_STORE'
3737
export const DARK_MODE = 'DARK_MODE'
3838
export const THEME_SETTING = 'THEME_SETTING'
39+
export const CUSTOM_COLUMNS = 'CUSTOM_COLUMNS'
3940

4041
export const CONTENT_WIDTH_TYPE = {
4142
Fluid: 'Fluid',

‎ui/src/views/AutogenView.vue‎

Lines changed: 63 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,19 @@
7373
</a-select-option>
7474
</a-select>
7575
</a-tooltip>
76+
<a-dropdown style="margin-left: 8px" :trigger="['click']" v-if="!$store.getters.metrics" v-model="customColumnsDropdownVisible">
77+
<a-button>
78+
{{ $t('label.columns') }} <a-icon type="down" style="color: rgba(0,0,0,.45)" />
79+
</a-button>
80+
<a-menu
81+
@click="() => { customColumnsDropdownVisible = true }"
82+
slot="overlay" >
83+
<a-menu-item v-for="(column, idx) in columnKeys" :key="idx" @click="updateSelectedColumns(column)">
84+
<a-checkbox :id="idx.toString()" :checked="selectedColumns.includes(getColumnKey(column))"/>
85+
{{ $t('label.' + getColumnKey(column)) }}
86+
</a-menu-item>
87+
</a-menu>
88+
</a-dropdown>
7689
</span>
7790
</breadcrumb>
7891
</a-col>
@@ -441,7 +454,7 @@
441454
<bulk-action-progress
442455
:showGroupActionModal="showGroupActionModal"
443456
:selectedItems="selectedItems"
444-
:selectedColumns="selectedColumns"
457+
:selectedColumns="bulkColumns"
445458
:message="modalInfo"
446459
@handle-cancel="handleCancel" />
447460
</div>
@@ -499,9 +512,13 @@ export default {
499512
apiName: '',
500513
loading: false,
501514
actionLoading: false,
515+
columnKeys: [],
516+
allColumns: [],
502517
columns: [],
518+
bulkColumns: [],
503519
selectedColumns: [],
504520
chosenColumns: [],
521+
customColumnsDropdownVisible: false,
505522
showGroupActionModal: false,
506523
selectedItems: [],
507524
items: [],
@@ -716,6 +733,7 @@ export default {
716733
this.actions = []
717734
this.columns = []
718735
this.columnKeys = []
736+
this.selectedColumns = []
719737
const refreshed = ('irefresh' in params)
720738
721739
params.listall = true
@@ -825,7 +843,20 @@ export default {
825843
scopedSlots: { customRender: key },
826844
sorter: function (a, b) { return genericCompare(a[this.dataIndex] || '', b[this.dataIndex] || '') }
827845
})
846+
this.selectedColumns.push(key)
847+
}
848+
this.allColumns = this.columns
849+
850+
if (!store.getters.metrics) {
851+
if (!this.$store.getters.customColumns[this.$store.getters.userInfo.id]) {
852+
this.$store.getters.customColumns[this.$store.getters.userInfo.id] = {}
853+
this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] = this.selectedColumns
854+
} else {
855+
this.selectedColumns = this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] || this.selectedColumns
856+
this.updateSelectedColumns()
857+
}
828858
}
859+
829860
this.chosenColumns = this.columns.filter(column => {
830861
return ![this.$t('label.state'), this.$t('label.hostname'), this.$t('label.hostid'), this.$t('label.zonename'),
831862
this.$t('label.zone'), this.$t('label.zoneid'), this.$t('label.ip'), this.$t('label.ipaddress'), this.$t('label.privateip'),
@@ -1218,7 +1249,7 @@ export default {
12181249
eventBus.$emit('update-bulk-job-status', this.selectedItems, false)
12191250
this.showGroupActionModal = false
12201251
this.selectedItems = []
1221-
this.selectedColumns = []
1252+
this.bulkColumns = []
12221253
this.selectedRowKeys = []
12231254
this.message = {}
12241255
},
@@ -1227,9 +1258,9 @@ export default {
12271258
this.promises = []
12281259
if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
12291260
if (this.selectedRowKeys.length > 0) {
1230-
this.selectedColumns = this.chosenColumns
1261+
this.bulkColumns = this.chosenColumns
12311262
this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
1232-
this.selectedColumns.splice(0, 0, {
1263+
this.bulkColumns.splice(0, 0, {
12331264
dataIndex: 'status',
12341265
title: this.$t('label.operation.status'),
12351266
scopedSlots: { customRender: 'status' },
@@ -1441,6 +1472,30 @@ export default {
14411472
shouldNavigateBack (action) {
14421473
return ((action.icon === 'delete' || ['archiveEvents', 'archiveAlerts', 'unmanageVirtualMachine'].includes(action.api)) && this.dataView)
14431474
},
1475+
getColumnKey (name) {
1476+
if (typeof name === 'object') {
1477+
name = Object.keys(name)[0]
1478+
}
1479+
return name
1480+
},
1481+
updateSelectedColumns (name) {
1482+
if (name) {
1483+
name = this.getColumnKey(name)
1484+
if (this.selectedColumns.includes(name)) {
1485+
this.selectedColumns = this.selectedColumns.filter(x => x !== name)
1486+
} else {
1487+
this.selectedColumns.push(name)
1488+
}
1489+
}
1490+
1491+
this.columns = this.allColumns.filter(x => this.selectedColumns.includes(x.dataIndex))
1492+
1493+
if (!this.$store.getters.customColumns[this.$store.getters.userInfo.id]) {
1494+
this.$store.getters.customColumns[this.$store.getters.userInfo.id] = {}
1495+
}
1496+
this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] = this.selectedColumns
1497+
this.$store.dispatch('SetCustomColumns', this.$store.getters.customColumns)
1498+
},
14441499
changeFilter (filter) {
14451500
const query = Object.assign({}, this.$route.query)
14461501
delete query.templatefilter
@@ -1609,4 +1664,8 @@ export default {
16091664
display: flex;
16101665
align-items: center;
16111666
}
1667+
1668+
.hide {
1669+
display: none !important;
1670+
}
16121671
</style>

0 commit comments

Comments
 (0)