browser: Implement infinite scrolling for object listing. (#3720)

fixes #2831

browser/app/js/actions.js

@@ -56,6 +56,7 @@ export const SET_POLICIES = 'SET_POLICIES'
 export const SET_SHARE_OBJECT = 'SET_SHARE_OBJECT'
 export const DELETE_CONFIRMATION = 'DELETE_CONFIRMATION'
 export const SET_PREFIX_WRITABLE = 'SET_PREFIX_WRITABLE'
+export const REMOVE_OBJECT = 'REMOVE_OBJECT'
 
 export const showDeleteConfirmation = (object) => {
   return {
@@ -206,6 +207,13 @@ export const showAlert = alert => {
   }
 }
 
+export const removeObject = object => {
+  return {
+    type: REMOVE_OBJECT,
+    object
+  }
+}
+
 export const setSidebarStatus = (status) => {
   return {
     type: SET_SIDEBAR_STATUS,
@@ -227,10 +235,12 @@ export const setVisibleBuckets = visibleBuckets => {
   }
 }
 
-export const setObjects = (objects) => {
+export const setObjects = (objects, marker, istruncated) => {
   return {
     type: SET_OBJECTS,
-    objects
+    objects,
+    marker,
+    istruncated
   }
 }
 
@@ -284,22 +294,55 @@ export const selectBucket = (newCurrentBucket, prefix) => {
   }
 }
 
+export const listObjects = () => {
+  return (dispatch, getState) => {
+    const {currentBucket, currentPath, marker, objects, istruncated, web} = getState()
+    if (!istruncated) return
+    web.ListObjects({
+      bucketName: currentBucket,
+      prefix: currentPath,
+      marker: marker
+    })
+      .then(res => {
+        let objects = res.objects
+        if (!objects.length)
+          objects = []
+        dispatch(setObjects(objects, res.nextmarker, res.istruncated))
+        dispatch(setPrefixWritable(res.writable))
+        dispatch(setLoadBucket(''))
+        dispatch(setLoadPath(''))
+      })
+      .catch(err => {
+        dispatch(showAlert({
+          type: 'danger',
+          message: err.message
+        }))
+        dispatch(setLoadBucket(''))
+        dispatch(setLoadPath(''))
+        // Use browserHistory.replace instead of push so that browser back button works fine.
+        browserHistory.replace(`${minioBrowserPrefix}/login`)
+      })
+  }
+}
+
 export const selectPrefix = prefix => {
   return (dispatch, getState) => {
     const {currentBucket, web} = getState()
+    dispatch(setObjects([], "", true))
     dispatch(setLoadPath(prefix))
     web.ListObjects({
       bucketName: currentBucket,
-      prefix
+      prefix,
+      marker: ""
     })
       .then(res => {
         let objects = res.objects
         if (!objects)
           objects = []
         dispatch(setObjects(
-          utils.sortObjectsByName(objects.map(object => {
-            object.name = object.name.replace(`${prefix}`, ''); return object
-          }))
+          objects,
+          res.nextmarker,
+          res.istruncated
         ))
         dispatch(setPrefixWritable(res.writable))
         dispatch(setSortNameOrder(false))
@@ -314,8 +357,8 @@ export const selectPrefix = prefix => {
         }))
         dispatch(setLoadBucket(''))
         dispatch(setLoadPath(''))
-	// Use browserHistory.replace instead of push so that browser back button works fine.
-	browserHistory.replace(`${minioBrowserPrefix}/login`)
+        // Use browserHistory.replace instead of push so that browser back button works fine.
+        browserHistory.replace(`${minioBrowserPrefix}/login`)
       })
   }
 }

browser/app/js/components/Browse.js

@@ -47,6 +47,7 @@ import * as mime from '../mime'
 import { minioBrowserPrefix } from '../constants'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import storage from 'local-storage-fallback'
+import InfiniteScroll from 'react-infinite-scroller';
 
 export default class Browse extends React.Component {
   componentDidMount() {
@@ -110,9 +111,6 @@ export default class Browse extends React.Component {
       if (!decPathname.endsWith('/'))
         decPathname += '/'
       if (decPathname === minioBrowserPrefix + '/') {
-        dispatch(actions.setCurrentBucket(''))
-        dispatch(actions.setCurrentPath(''))
-        dispatch(actions.setObjects([]))
         return
       }
       let obj = utils.pathSlice(decPathname)
@@ -140,6 +138,11 @@ export default class Browse extends React.Component {
     this.props.dispatch(actions.setVisibleBuckets(buckets.filter(bucket => bucket.indexOf(e.target.value) > -1)))
   }
 
+  listObjects() {
+    const {dispatch} = this.props
+    dispatch(actions.listObjects())
+  }
+
   selectPrefix(e, prefix) {
     e.preventDefault()
     const {dispatch, currentPath, web, currentBucket} = this.props
@@ -231,7 +234,7 @@ export default class Browse extends React.Component {
     })
       .then(() => {
         this.hideDeleteConfirmation()
-        dispatch(actions.selectPrefix(currentPath))
+        dispatch(actions.removeObject(deleteConfirmation.object))
       })
       .catch(e => dispatch(actions.showAlert({
         type: 'danger',
@@ -360,7 +363,6 @@ export default class Browse extends React.Component {
     }
   }
 
-
   render() {
     const {total, free} = this.props.storageInfo
     const {showMakeBucketModal, alert, sortNameOrder, sortSizeOrder, sortDateOrder, showAbout, showBucketPolicy} = this.props
@@ -370,7 +372,7 @@ export default class Browse extends React.Component {
     const {policies, currentBucket, currentPath} = this.props
     const {deleteConfirmation} = this.props
     const {shareObject} = this.props
-    const {web, prefixWritable} = this.props
+    const {web, prefixWritable, istruncated} = this.props
 
     // Don't always show the SettingsModal. This is done here instead of in
     // SettingsModal.js so as to allow for #componentWillMount to handle
@@ -476,7 +478,6 @@ export default class Browse extends React.Component {
                            </OverlayTrigger>
                          </Dropdown.Menu>
                        </Dropdown>
-
     }
 
     return (
@@ -545,10 +546,18 @@ export default class Browse extends React.Component {
               </header>
             </div>
             <div className="feb-container">
-              <ObjectsList dataType={ this.dataType.bind(this) }
-                selectPrefix={ this.selectPrefix.bind(this) }
-                showDeleteConfirmation={ this.showDeleteConfirmation.bind(this) }
-                shareObject={ this.shareObject.bind(this) } />
+              <InfiniteScroll loadMore={ this.listObjects.bind(this) }
+                hasMore={ istruncated }
+                useWindow={ true }
+                initialLoad={ false }>
+                <ObjectsList dataType={ this.dataType.bind(this) }
+                  selectPrefix={ this.selectPrefix.bind(this) }
+                  showDeleteConfirmation={ this.showDeleteConfirmation.bind(this) }
+                  shareObject={ this.shareObject.bind(this) } />
+              </InfiniteScroll>
+              <div className="text-center" style={ { display: istruncated ? 'block' : 'none' } }>
+                <span>Loading...</span>
+              </div>
             </div>
             <UploadModal />
             { createButton }

browser/app/js/components/Path.js

@@ -29,7 +29,7 @@ let Path = ({currentBucket, currentPath, selectPrefix}) => {
   }
 
   return (
-      <h2><span className="main"><a onClick={ (e) => selectPrefix(e, '') } href="">{ currentBucket }</a></span>{ path }</h2>
+    <h2><span className="main"><a onClick={ (e) => selectPrefix(e, '') } href="">{ currentBucket }</a></span>{ path }</h2>
   )
 }
 

browser/app/js/reducers.js

@@ -21,6 +21,7 @@ export default (state = {
     buckets: [],
     visibleBuckets: [],
     objects: [],
+    istruncated: true,
     storageInfo: {},
     serverInfo: {},
     currentBucket: '',
@@ -76,7 +77,15 @@ export default (state = {
       newState.currentBucket = action.currentBucket
       break
     case actions.SET_OBJECTS:
-      newState.objects = action.objects
+      if (!action.objects.length) {
+        newState.objects = []
+        newState.marker = ""
+        newState.istruncated = action.istruncated
+      } else {
+        newState.objects = [...newState.objects, ...action.objects]
+        newState.marker = action.marker
+        newState.istruncated = action.istruncated
+      }
       break
     case actions.SET_CURRENT_PATH:
       newState.currentPath = action.currentPath
@@ -171,6 +180,11 @@ export default (state = {
     case actions.SET_PREFIX_WRITABLE:
       newState.prefixWritable = action.prefixWritable
       break
+    case actions.REMOVE_OBJECT:
+      let idx = newState.objects.findIndex(object => object.name === action.object)
+      if (idx == -1) break
+      newState.objects = [...newState.objects.slice(0, idx), ...newState.objects.slice(idx + 1)]
+      break
   }
   return newState
 }