Various UI improvements

- 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]>

Author: votdev

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 }
+    },
   },
 }

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({

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 (
           <div>{record.name}</div>
@@ -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 }}
       />
@@ -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

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: [],
             })
           },