diff --git a/src/models/objectStore.js b/src/models/objectStore.js
index a582a78ca..dcc932b39 100644
--- a/src/models/objectStore.js
+++ b/src/models/objectStore.js
@@ -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 }) {
@@ -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 }
+ },
},
}
diff --git a/src/routes/objectStorage/ObjectStoreActions.js b/src/routes/objectStorage/ObjectStoreActions.js
index c1a127c69..352761d8e 100644
--- a/src/routes/objectStorage/ObjectStoreActions.js
+++ b/src/routes/objectStorage/ObjectStoreActions.js
@@ -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({
diff --git a/src/routes/objectStorage/ObjectStoreList.js b/src/routes/objectStorage/ObjectStoreList.js
index 3978b9cc2..d0b3d44e0 100644
--- a/src/routes/objectStorage/ObjectStoreList.js
+++ b/src/routes/objectStorage/ObjectStoreList.js
@@ -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,
@@ -12,6 +14,9 @@ function list({
editObjectStore,
administrateObjectStore,
deleteObjectStore,
+ onSorterChange,
+ sorter,
+ onRowClick,
}) {
const actionsProps = {
editObjectStore,
@@ -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: '' }
@@ -52,6 +58,7 @@ function list({
dataIndex: 'name',
key: 'name',
width: 200,
+ sorter: (a, b) => sortTable(a, b, 'name'),
render: (text, record) => {
return (
{record.name}
@@ -82,17 +89,21 @@ function list({
},
]
+ setSortOrder(columns, sorter)
+
return (
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 }}
/>
@@ -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
diff --git a/src/routes/objectStorage/index.js b/src/routes/objectStorage/index.js
index ca386c55d..5a165391e 100644
--- a/src/routes/objectStorage/index.js
+++ b/src/routes/objectStorage/index.js
@@ -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(),
})
@@ -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
@@ -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({
@@ -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(),
})
@@ -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 = {
@@ -197,7 +247,7 @@ class ObjectStore extends React.Component {
payload: record,
callback: () => {
me.setState({
- ...this.state,
+ ...me.state,
selectedRows: [],
})
},