Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

Commit

Permalink
Various UI improvements
Browse files Browse the repository at this point in the history
- Add sorter
- Init pagination correctly
- Cleanup store handling in objectStorage
- Handle window resize correctly (longhorn/longhorn#7036)
- Stop event propagation in action menu (longhorn/longhorn#7032)

Signed-off-by: Volker Theile <[email protected]>
  • Loading branch information
votdev committed Nov 3, 2023
1 parent f5230a0 commit 5f276d9
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 16 deletions.
7 changes: 6 additions & 1 deletion src/models/objectStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@ import { listObjectStores, getObjectStore, createObjectStore, deleteObjectStore
import { wsChanges, updateState } from '../utils/websocket'
import queryString from 'query-string'
import { enableQueryData } from '../utils/dataDependency'
import { getSorter, saveSorter } from '../utils/store'

export default {
namespace: 'objectstorage',
state: {
ws: null,
data: [],
selected: {},
resourceType: 'objectstore',
socketStatus: 'closed',
sorter: getSorter('objectstoreList.sorter'),
},
subscriptions: {
setup({ dispatch, history }) {
Expand Down Expand Up @@ -82,5 +83,9 @@ export default {
updateWs(state, action) {
return { ...state, ws: action.payload }
},
updateSorter(state, action) {
saveSorter('objectstoreList.sorter', action.payload)
return { ...state, sorter: action.payload }
},
},
}
5 changes: 5 additions & 0 deletions src/routes/objectStorage/ObjectStoreActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ const confirm = Modal.confirm

function actions({ selected, deleteObjectStore, editObjectStore, administrateObjectStore }) {
const handleMenuClick = (event, record) => {
// Stop event propagation, otherwise the click will be processed by
// other UI components, e.g. the table row below the clicked menu,
// which is not wanted in that case.
event.domEvent.stopPropagation()

switch (event.key) {
case 'delete':
confirm({
Expand Down
16 changes: 15 additions & 1 deletion src/routes/objectStorage/ObjectStoreList.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
import { Table, Tooltip } from 'antd'
import { pagination } from '../../utils/page'
import ObjectStoreActions from './ObjectStoreActions'
import { sortTable } from '../../utils/sort'
import { setSortOrder } from '../../utils/store'

function list({
dataSource,
Expand All @@ -12,6 +14,9 @@ function list({
editObjectStore,
administrateObjectStore,
deleteObjectStore,
onSorterChange,
sorter,
onRowClick,
}) {
const actionsProps = {
editObjectStore,
Expand All @@ -35,6 +40,7 @@ function list({
dataIndex: 'state',
key: 'state',
width: 160,
sorter: (a, b) => sortTable(a, b, 'state'),
render: (text, record) => {
const tooltip = `Object Store ${record.name} is ${record.state}`
const colormap = storeStateColorMap[record.state] || { color: '', bg: '' }
Expand All @@ -52,6 +58,7 @@ function list({
dataIndex: 'name',
key: 'name',
width: 200,
sorter: (a, b) => sortTable(a, b, 'name'),
render: (text, record) => {
return (
<div>{record.name}</div>
Expand Down Expand Up @@ -82,17 +89,21 @@ function list({
},
]

setSortOrder(columns, sorter)

return (
<div id="objectStoreTable" style={{ flex: 1, height: '1px', overflow: 'hidden' }}>
<Table
className="common-table-class"
bordered={false}
columns={columns}
onChange={(p, f, s) => onSorterChange(s)}
rowSelection={rowSelection}
dataSource={dataSource}
loading={loading}
onRowClick={onRowClick}
simple
pagination={pagination}
pagination={pagination('objectStoreSize')}
rowKey={record => record.id}
scroll={{ x: 970, y: dataSource.length > 0 ? height : 1 }}
/>
Expand All @@ -108,6 +119,9 @@ list.propTypes = {
editObjectStore: PropTypes.func,
administrateObjectStore: PropTypes.func,
deleteObjectStore: PropTypes.func,
sorter: PropTypes.object,
onSorterChange: PropTypes.func,
onRowClick: PropTypes.func,
}

export default list
78 changes: 64 additions & 14 deletions src/routes/objectStorage/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,27 +22,50 @@ class ObjectStore extends React.Component {
createModalKey: Math.random(),
editModalVisible: false,
editModalKey: Math.random(),
commandKeyDown: false,
}
}

componentDidMount() {
let height = document.getElementById('objectStoreTable').offsetHeight - C.ContainerMarginHeight
this.onResize()
window.addEventListener('resize', this.onResize)
window.addEventListener('keydown', this.onKeyDown)
window.addEventListener('keyup', this.onKeyUp)
}

componentWillUnmount() {
window.removeEventListener('resize', this.onResize)
window.removeEventListener('keydown', this.onKeyDown)
window.removeEventListener('keyup', this.onKeyUp)
}

onKeyUp = () => {
this.setState({
height,
...this.state,
commandKeyDown: false,
})
window.onresize = () => {
height = document.getElementById('objectStoreTable').offsetHeight - C.ContainerMarginHeight
}

onKeyDown = (e) => {
if ((e.keyCode === 91 || e.keyCode === 17) && !this.state.commandKeyDown) {
this.setState({
height,
...this.state,
commandKeyDown: true,
})
this.props.dispatch({ type: 'app/changeNavbar' })
}
}

onResize = () => {
const height = document.getElementById('objectStoreTable').offsetHeight - C.ContainerMarginHeight
this.setState({
height,
})
}

showCreateModal = () => {
this.setState({
...this.state,
selected: {},
selectedRows: [],
createModalVisible: true,
createModalKey: Math.random(),
})
Expand All @@ -51,7 +74,7 @@ class ObjectStore extends React.Component {
render() {
const me = this
const { dispatch, loading, location } = this.props
const { data } = this.props.objectstorage
const { data, sorter } = this.props.objectstorage
const { field, value } = queryString.parse(this.props.location.search)

const settings = this.props.setting.data
Expand Down Expand Up @@ -113,7 +136,7 @@ class ObjectStore extends React.Component {
}

const editModalProps = {
selected: this.state.selected,
selected: this.state.selectedRows[0],
visible: this.state.editModalVisible,
onCancel() {
me.setState({
Expand Down Expand Up @@ -142,14 +165,14 @@ class ObjectStore extends React.Component {
onChange(_, records) {
me.setState({
...me.state,
selectedRows: records,
selectedRows: [...records],
})
},
},
editObjectStore: (record) => {
this.setState({
...this.state,
selected: record,
me.setState({
...me.state,
selectedRows: [record],
editModalVisible: true,
editModalKey: Math.random(),
})
Expand All @@ -165,6 +188,33 @@ class ObjectStore extends React.Component {
payload: record,
})
},
onSorterChange: (s) => {
dispatch({
type: 'objectstorage/updateSorter',
payload: { field: s.field, order: s.order, columnKey: s.columnKey },
})
},
sorter,
onRowClick: (record) => {
let selecteRowByClick = [record]
if (me.state.commandKeyDown) {
me.state.selectedRows.forEach((item) => {
if (selecteRowByClick.every((ele) => {
return ele.id !== item.id
})) {
selecteRowByClick.push(item)
} else {
selecteRowByClick = selecteRowByClick.filter((ele) => {
return ele.id !== item.id
})
}
})
}
me.setState({
...me.state,
selectedRows: [...selecteRowByClick],
})
},
}

const filterProps = {
Expand Down Expand Up @@ -197,7 +247,7 @@ class ObjectStore extends React.Component {
payload: record,
callback: () => {
me.setState({
...this.state,
...me.state,
selectedRows: [],
})
},
Expand Down

0 comments on commit 5f276d9

Please sign in to comment.