list objects in browser ordered by last modified (#7805)

- return all objects in web-handlers listObjects response
- added local pagination to object list ui
- also fixed infinite loader and removed unused fields
This commit is contained in:
Kanagaraj M 2019-06-26 05:01:50 +05:30 committed by kannappanr
parent 941fed8e4a
commit 286c663495
15 changed files with 436 additions and 326 deletions

View File

@ -31,3 +31,10 @@ export const SHARE_OBJECT_EXPIRY_MINUTES = 0
export const ACCESS_KEY_MIN_LENGTH = 3 export const ACCESS_KEY_MIN_LENGTH = 3
export const SECRET_KEY_MIN_LENGTH = 8 export const SECRET_KEY_MIN_LENGTH = 8
export const SORT_BY_NAME = "name"
export const SORT_BY_SIZE = "size"
export const SORT_BY_LAST_MODIFIED = "last-modified"
export const SORT_ORDER_ASC = "asc"
export const SORT_ORDER_DESC = "desc"

View File

@ -18,11 +18,19 @@ import React from "react"
import classNames from "classnames" import classNames from "classnames"
import { connect } from "react-redux" import { connect } from "react-redux"
import * as actionsObjects from "./actions" import * as actionsObjects from "./actions"
import {
SORT_BY_NAME,
SORT_BY_SIZE,
SORT_BY_LAST_MODIFIED,
SORT_ORDER_DESC,
SORT_ORDER_ASC
} from "../constants"
export const ObjectsHeader = ({ export const ObjectsHeader = ({
sortNameOrder, sortedByName,
sortSizeOrder, sortedBySize,
sortLastModifiedOrder, sortedByLastModified,
sortOrder,
sortObjects sortObjects
}) => ( }) => (
<div className="feb-container"> <div className="feb-container">
@ -31,48 +39,54 @@ export const ObjectsHeader = ({
<div <div
className="fesl-item fesl-item-name" className="fesl-item fesl-item-name"
id="sort-by-name" id="sort-by-name"
onClick={() => sortObjects("name")} onClick={() => sortObjects(SORT_BY_NAME)}
data-sort="name" data-sort="name"
> >
Name Name
<i <i
className={classNames({ className={classNames({
"fesli-sort": true, "fesli-sort": true,
"fesli-sort--active": sortedByName,
fa: true, fa: true,
"fa-sort-alpha-desc": sortNameOrder, "fa-sort-alpha-desc": sortedByName && sortOrder === SORT_ORDER_DESC,
"fa-sort-alpha-asc": !sortNameOrder "fa-sort-alpha-asc": sortedByName && sortOrder === SORT_ORDER_ASC
})} })}
/> />
</div> </div>
<div <div
className="fesl-item fesl-item-size" className="fesl-item fesl-item-size"
id="sort-by-size" id="sort-by-size"
onClick={() => sortObjects("size")} onClick={() => sortObjects(SORT_BY_SIZE)}
data-sort="size" data-sort="size"
> >
Size Size
<i <i
className={classNames({ className={classNames({
"fesli-sort": true, "fesli-sort": true,
"fesli-sort--active": sortedBySize,
fa: true, fa: true,
"fa-sort-amount-desc": sortSizeOrder, "fa-sort-amount-desc":
"fa-sort-amount-asc": !sortSizeOrder sortedBySize && sortOrder === SORT_ORDER_DESC,
"fa-sort-amount-asc": sortedBySize && sortOrder === SORT_ORDER_ASC
})} })}
/> />
</div> </div>
<div <div
className="fesl-item fesl-item-modified" className="fesl-item fesl-item-modified"
id="sort-by-last-modified" id="sort-by-last-modified"
onClick={() => sortObjects("last-modified")} onClick={() => sortObjects(SORT_BY_LAST_MODIFIED)}
data-sort="last-modified" data-sort="last-modified"
> >
Last Modified Last Modified
<i <i
className={classNames({ className={classNames({
"fesli-sort": true, "fesli-sort": true,
"fesli-sort--active": sortedByLastModified,
fa: true, fa: true,
"fa-sort-numeric-desc": sortLastModifiedOrder, "fa-sort-numeric-desc":
"fa-sort-numeric-asc": !sortLastModifiedOrder sortedByLastModified && sortOrder === SORT_ORDER_DESC,
"fa-sort-numeric-asc":
sortedByLastModified && sortOrder === SORT_ORDER_ASC
})} })}
/> />
</div> </div>
@ -83,10 +97,10 @@ export const ObjectsHeader = ({
const mapStateToProps = state => { const mapStateToProps = state => {
return { return {
sortNameOrder: state.objects.sortBy == "name" && state.objects.sortOrder, sortedByName: state.objects.sortBy == SORT_BY_NAME,
sortSizeOrder: state.objects.sortBy == "size" && state.objects.sortOrder, sortedBySize: state.objects.sortBy == SORT_BY_SIZE,
sortLastModifiedOrder: sortedByLastModified: state.objects.sortBy == SORT_BY_LAST_MODIFIED,
state.objects.sortBy == "last-modified" && state.objects.sortOrder sortOrder: state.objects.sortOrder
} }
} }
@ -96,4 +110,7 @@ const mapDispatchToProps = dispatch => {
} }
} }
export default connect(mapStateToProps, mapDispatchToProps)(ObjectsHeader) export default connect(
mapStateToProps,
mapDispatchToProps
)(ObjectsHeader)

View File

@ -15,32 +15,52 @@
*/ */
import React from "react" import React from "react"
import classNames from "classnames"
import { connect } from "react-redux" import { connect } from "react-redux"
import InfiniteScroll from "react-infinite-scroller" import InfiniteScroll from "react-infinite-scroller"
import * as actionsObjects from "./actions"
import ObjectsList from "./ObjectsList" import ObjectsList from "./ObjectsList"
export class ObjectsListContainer extends React.Component { export class ObjectsListContainer extends React.Component {
constructor(props) {
super(props)
this.state = {
page: 1
}
this.loadNextPage = this.loadNextPage.bind(this)
}
componentWillReceiveProps(nextProps) {
if (
nextProps.currentBucket !== this.props.currentBucket ||
nextProps.currentPrefix !== this.props.currentPrefix ||
nextProps.sortBy !== this.props.sortBy ||
nextProps.sortOrder !== this.props.sortOrder
) {
this.setState({
page: 1
})
}
}
loadNextPage() {
this.setState(state => {
return { page: state.page + 1 }
})
}
render() { render() {
const { objects, isTruncated, currentBucket, loadObjects } = this.props const { objects, listLoading } = this.props
const visibleObjects = objects.slice(0, this.state.page * 100)
return ( return (
<div className="feb-container"> <div style={{ position: "relative" }}>
<InfiniteScroll <InfiniteScroll
pageStart={0} pageStart={0}
loadMore={() => loadObjects(true)} loadMore={this.loadNextPage}
hasMore={isTruncated} hasMore={objects.length > visibleObjects.length}
useWindow={true} useWindow={true}
initialLoad={false} initialLoad={false}
> >
<ObjectsList objects={objects} /> <ObjectsList objects={visibleObjects} />
</InfiniteScroll> </InfiniteScroll>
<div {listLoading && <div className="loading" />}
className="text-center"
style={{ display: isTruncated && currentBucket ? "block" : "none" }}
>
<span>Loading...</span>
</div>
</div> </div>
) )
} }
@ -51,16 +71,10 @@ const mapStateToProps = state => {
currentBucket: state.buckets.currentBucket, currentBucket: state.buckets.currentBucket,
currentPrefix: state.objects.currentPrefix, currentPrefix: state.objects.currentPrefix,
objects: state.objects.list, objects: state.objects.list,
isTruncated: state.objects.isTruncated sortBy: state.objects.sortBy,
sortOrder: state.objects.sortOrder,
listLoading: state.objects.listLoading
} }
} }
const mapDispatchToProps = dispatch => { export default connect(mapStateToProps)(ObjectsListContainer)
return {
loadObjects: append => dispatch(actionsObjects.fetchObjects(append))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(
ObjectsListContainer
)

View File

@ -17,6 +17,7 @@
import React from "react" import React from "react"
import { shallow } from "enzyme" import { shallow } from "enzyme"
import { ObjectsHeader } from "../ObjectsHeader" import { ObjectsHeader } from "../ObjectsHeader"
import { SORT_ORDER_ASC, SORT_ORDER_DESC } from "../../constants"
describe("ObjectsHeader", () => { describe("ObjectsHeader", () => {
it("should render without crashing", () => { it("should render without crashing", () => {
@ -24,44 +25,84 @@ describe("ObjectsHeader", () => {
shallow(<ObjectsHeader sortObjects={sortObjects} />) shallow(<ObjectsHeader sortObjects={sortObjects} />)
}) })
it("should render columns with asc classes by default", () => { it("should render the name column with asc class when objects are sorted by name asc", () => {
const sortObjects = jest.fn() const sortObjects = jest.fn()
const wrapper = shallow(<ObjectsHeader sortObjects={sortObjects} />) const wrapper = shallow(
<ObjectsHeader
sortObjects={sortObjects}
sortedByName={true}
sortOrder={SORT_ORDER_ASC}
/>
)
expect( expect(
wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-asc") wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-asc")
).toBeTruthy() ).toBeTruthy()
expect(
wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-asc")
).toBeTruthy()
expect(
wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-asc")
).toBeTruthy()
}) })
it("should render name column with desc class when objects are sorted by name", () => { it("should render the name column with desc class when objects are sorted by name desc", () => {
const sortObjects = jest.fn() const sortObjects = jest.fn()
const wrapper = shallow( const wrapper = shallow(
<ObjectsHeader sortObjects={sortObjects} sortNameOrder={true} /> <ObjectsHeader
sortObjects={sortObjects}
sortedByName={true}
sortOrder={SORT_ORDER_DESC}
/>
) )
expect( expect(
wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-desc") wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-desc")
).toBeTruthy() ).toBeTruthy()
}) })
it("should render size column with desc class when objects are sorted by size", () => { it("should render the size column with asc class when objects are sorted by size asc", () => {
const sortObjects = jest.fn() const sortObjects = jest.fn()
const wrapper = shallow( const wrapper = shallow(
<ObjectsHeader sortObjects={sortObjects} sortSizeOrder={true} /> <ObjectsHeader
sortObjects={sortObjects}
sortedBySize={true}
sortOrder={SORT_ORDER_ASC}
/>
)
expect(
wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-asc")
).toBeTruthy()
})
it("should render the size column with desc class when objects are sorted by size desc", () => {
const sortObjects = jest.fn()
const wrapper = shallow(
<ObjectsHeader
sortObjects={sortObjects}
sortedBySize={true}
sortOrder={SORT_ORDER_DESC}
/>
) )
expect( expect(
wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-desc") wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-desc")
).toBeTruthy() ).toBeTruthy()
}) })
it("should render last modified column with desc class when objects are sorted by last modified", () => { it("should render the date column with asc class when objects are sorted by date asc", () => {
const sortObjects = jest.fn() const sortObjects = jest.fn()
const wrapper = shallow( const wrapper = shallow(
<ObjectsHeader sortObjects={sortObjects} sortLastModifiedOrder={true} /> <ObjectsHeader
sortObjects={sortObjects}
sortedByLastModified={true}
sortOrder={SORT_ORDER_ASC}
/>
)
expect(
wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-asc")
).toBeTruthy()
})
it("should render the date column with desc class when objects are sorted by date desc", () => {
const sortObjects = jest.fn()
const wrapper = shallow(
<ObjectsHeader
sortObjects={sortObjects}
sortedByLastModified={true}
sortOrder={SORT_ORDER_DESC}
/>
) )
expect( expect(
wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-desc") wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-desc")

View File

@ -20,14 +20,13 @@ import { ObjectsListContainer } from "../ObjectsListContainer"
describe("ObjectsList", () => { describe("ObjectsList", () => {
it("should render without crashing", () => { it("should render without crashing", () => {
shallow(<ObjectsListContainer loadObjects={jest.fn()} />) shallow(<ObjectsListContainer objects={[]} />)
}) })
it("should render ObjectsList with objects", () => { it("should render ObjectsList with objects", () => {
const wrapper = shallow( const wrapper = shallow(
<ObjectsListContainer <ObjectsListContainer
objects={[{ name: "test1.jpg" }, { name: "test2.jpg" }]} objects={[{ name: "test1.jpg" }, { name: "test2.jpg" }]}
loadObjects={jest.fn()}
/> />
) )
expect(wrapper.find("ObjectsList").length).toBe(1) expect(wrapper.find("ObjectsList").length).toBe(1)
@ -37,10 +36,14 @@ describe("ObjectsList", () => {
]) ])
}) })
it("should show the loading indicator at the bottom if there are more elements to display", () => { it("should show the loading indicator when the objects are being loaded", () => {
const wrapper = shallow( const wrapper = shallow(
<ObjectsListContainer currentBucket="test1" isTruncated={true} /> <ObjectsListContainer
currentBucket="test1"
objects={[]}
listLoading={true}
/>
) )
expect(wrapper.find(".text-center").prop("style")).toHaveProperty("display", "block") expect(wrapper.find(".loading").exists()).toBeTruthy()
}) })
}) })

View File

@ -18,7 +18,13 @@ import configureStore from "redux-mock-store"
import thunk from "redux-thunk" import thunk from "redux-thunk"
import * as actionsObjects from "../actions" import * as actionsObjects from "../actions"
import * as alertActions from "../../alert/actions" import * as alertActions from "../../alert/actions"
import { minioBrowserPrefix } from "../../constants" import {
minioBrowserPrefix,
SORT_BY_NAME,
SORT_ORDER_ASC,
SORT_BY_LAST_MODIFIED,
SORT_ORDER_DESC
} from "../../constants"
import history from "../../history" import history from "../../history"
jest.mock("../../web", () => ({ jest.mock("../../web", () => ({
@ -37,8 +43,6 @@ jest.mock("../../web", () => ({
} else { } else {
return Promise.resolve({ return Promise.resolve({
objects: [{ name: "test1" }, { name: "test2" }], objects: [{ name: "test1" }, { name: "test2" }],
istruncated: false,
nextmarker: "test2",
writable: false writable: false
}) })
} }
@ -77,17 +81,11 @@ describe("Objects actions", () => {
const expectedActions = [ const expectedActions = [
{ {
type: "objects/SET_LIST", type: "objects/SET_LIST",
objects: [{ name: "test1" }, { name: "test2" }], objects: [{ name: "test1" }, { name: "test2" }]
isTruncated: false,
marker: "test2"
} }
] ]
store.dispatch( store.dispatch(
actionsObjects.setList( actionsObjects.setList([{ name: "test1" }, { name: "test2" }])
[{ name: "test1" }, { name: "test2" }],
"test2",
false
)
) )
const actions = store.getActions() const actions = store.getActions()
expect(actions).toEqual(expectedActions) expect(actions).toEqual(expectedActions)
@ -98,10 +96,10 @@ describe("Objects actions", () => {
const expectedActions = [ const expectedActions = [
{ {
type: "objects/SET_SORT_BY", type: "objects/SET_SORT_BY",
sortBy: "name" sortBy: SORT_BY_NAME
} }
] ]
store.dispatch(actionsObjects.setSortBy("name")) store.dispatch(actionsObjects.setSortBy(SORT_BY_NAME))
const actions = store.getActions() const actions = store.getActions()
expect(actions).toEqual(expectedActions) expect(actions).toEqual(expectedActions)
}) })
@ -111,10 +109,10 @@ describe("Objects actions", () => {
const expectedActions = [ const expectedActions = [
{ {
type: "objects/SET_SORT_ORDER", type: "objects/SET_SORT_ORDER",
sortOrder: true sortOrder: SORT_ORDER_ASC
} }
] ]
store.dispatch(actionsObjects.setSortOrder(true)) store.dispatch(actionsObjects.setSortOrder(SORT_ORDER_ASC))
const actions = store.getActions() const actions = store.getActions()
expect(actions).toEqual(expectedActions) expect(actions).toEqual(expectedActions)
}) })
@ -126,23 +124,26 @@ describe("Objects actions", () => {
}) })
const expectedActions = [ const expectedActions = [
{ {
type: "objects/SET_LIST", type: "objects/RESET_LIST"
objects: [{ name: "test1" }, { name: "test2" }],
marker: "test2",
isTruncated: false
}, },
{ listLoading: true, type: "objects/SET_LIST_LOADING" },
{ {
type: "objects/SET_SORT_BY", type: "objects/SET_SORT_BY",
sortBy: "" sortBy: SORT_BY_LAST_MODIFIED
}, },
{ {
type: "objects/SET_SORT_ORDER", type: "objects/SET_SORT_ORDER",
sortOrder: false sortOrder: SORT_ORDER_DESC
},
{
type: "objects/SET_LIST",
objects: [{ name: "test2" }, { name: "test1" }]
}, },
{ {
type: "objects/SET_PREFIX_WRITABLE", type: "objects/SET_PREFIX_WRITABLE",
prefixWritable: false prefixWritable: false
} },
{ listLoading: false, type: "objects/SET_LIST_LOADING" }
] ]
return store.dispatch(actionsObjects.fetchObjects()).then(() => { return store.dispatch(actionsObjects.fetchObjects()).then(() => {
const actions = store.getActions() const actions = store.getActions()
@ -150,35 +151,16 @@ describe("Objects actions", () => {
}) })
}) })
it("creates objects/APPEND_LIST after fetching more objects", () => {
const store = mockStore({
buckets: { currentBucket: "bk1" },
objects: { currentPrefix: "" }
})
const expectedActions = [
{
type: "objects/APPEND_LIST",
objects: [{ name: "test1" }, { name: "test2" }],
marker: "test2",
isTruncated: false
},
{
type: "objects/SET_PREFIX_WRITABLE",
prefixWritable: false
}
]
return store.dispatch(actionsObjects.fetchObjects(true)).then(() => {
const actions = store.getActions()
expect(actions).toEqual(expectedActions)
})
})
it("creates objects/RESET_LIST after failing to fetch the objects from bucket with ListObjects denied for LoggedIn users", () => { it("creates objects/RESET_LIST after failing to fetch the objects from bucket with ListObjects denied for LoggedIn users", () => {
const store = mockStore({ const store = mockStore({
buckets: { currentBucket: "test-deny" }, buckets: { currentBucket: "test-deny" },
objects: { currentPrefix: "" } objects: { currentPrefix: "" }
}) })
const expectedActions = [ const expectedActions = [
{
type: "objects/RESET_LIST"
},
{ listLoading: true, type: "objects/SET_LIST_LOADING" },
{ {
type: "alert/SET", type: "alert/SET",
alert: { alert: {
@ -189,8 +171,9 @@ describe("Objects actions", () => {
} }
}, },
{ {
type: "object/RESET_LIST" type: "objects/RESET_LIST"
} },
{ listLoading: false, type: "objects/SET_LIST_LOADING" }
] ]
return store.dispatch(actionsObjects.fetchObjects()).then(() => { return store.dispatch(actionsObjects.fetchObjects()).then(() => {
const actions = store.getActions() const actions = store.getActions()
@ -213,28 +196,24 @@ describe("Objects actions", () => {
objects: { objects: {
list: [], list: [],
sortBy: "", sortBy: "",
sortOrder: false, sortOrder: SORT_ORDER_ASC
isTruncated: false,
marker: ""
} }
}) })
const expectedActions = [ const expectedActions = [
{ {
type: "objects/SET_SORT_BY", type: "objects/SET_SORT_BY",
sortBy: "name" sortBy: SORT_BY_NAME
}, },
{ {
type: "objects/SET_SORT_ORDER", type: "objects/SET_SORT_ORDER",
sortOrder: true sortOrder: SORT_ORDER_ASC
}, },
{ {
type: "objects/SET_LIST", type: "objects/SET_LIST",
objects: [], objects: []
isTruncated: false,
marker: ""
} }
] ]
store.dispatch(actionsObjects.sortObjects("name")) store.dispatch(actionsObjects.sortObjects(SORT_BY_NAME))
const actions = store.getActions() const actions = store.getActions()
expect(actions).toEqual(expectedActions) expect(actions).toEqual(expectedActions)
}) })
@ -246,6 +225,10 @@ describe("Objects actions", () => {
}) })
const expectedActions = [ const expectedActions = [
{ type: "objects/SET_CURRENT_PREFIX", prefix: "abc/" }, { type: "objects/SET_CURRENT_PREFIX", prefix: "abc/" },
{
type: "objects/RESET_LIST"
},
{ listLoading: true, type: "objects/SET_LIST_LOADING" },
{ type: "objects/CHECKED_LIST_RESET" } { type: "objects/CHECKED_LIST_RESET" }
] ]
store.dispatch(actionsObjects.selectPrefix("abc/")) store.dispatch(actionsObjects.selectPrefix("abc/"))

View File

@ -16,17 +16,17 @@
import reducer from "../reducer" import reducer from "../reducer"
import * as actions from "../actions" import * as actions from "../actions"
import { SORT_ORDER_ASC, SORT_BY_NAME } from "../../constants"
describe("objects reducer", () => { describe("objects reducer", () => {
it("should return the initial state", () => { it("should return the initial state", () => {
const initialState = reducer(undefined, {}) const initialState = reducer(undefined, {})
expect(initialState).toEqual({ expect(initialState).toEqual({
list: [], list: [],
listLoading: false,
sortBy: "", sortBy: "",
sortOrder: false, sortOrder: SORT_ORDER_ASC,
currentPrefix: "", currentPrefix: "",
marker: "",
isTruncated: false,
prefixWritable: false, prefixWritable: false,
shareObject: { shareObject: {
show: false, show: false,
@ -40,37 +40,9 @@ describe("objects reducer", () => {
it("should handle SET_LIST", () => { it("should handle SET_LIST", () => {
const newState = reducer(undefined, { const newState = reducer(undefined, {
type: actions.SET_LIST, type: actions.SET_LIST,
objects: [{ name: "obj1" }, { name: "obj2" }], objects: [{ name: "obj1" }, { name: "obj2" }]
marker: "obj2",
isTruncated: false
}) })
expect(newState.list).toEqual([{ name: "obj1" }, { name: "obj2" }]) expect(newState.list).toEqual([{ name: "obj1" }, { name: "obj2" }])
expect(newState.marker).toBe("obj2")
expect(newState.isTruncated).toBeFalsy()
})
it("should handle APPEND_LIST", () => {
const newState = reducer(
{
list: [{ name: "obj1" }, { name: "obj2" }],
marker: "obj2",
isTruncated: true
},
{
type: actions.APPEND_LIST,
objects: [{ name: "obj3" }, { name: "obj4" }],
marker: "obj4",
isTruncated: false
}
)
expect(newState.list).toEqual([
{ name: "obj1" },
{ name: "obj2" },
{ name: "obj3" },
{ name: "obj4" }
])
expect(newState.marker).toBe("obj4")
expect(newState.isTruncated).toBeFalsy()
}) })
it("should handle REMOVE", () => { it("should handle REMOVE", () => {
@ -98,30 +70,28 @@ describe("objects reducer", () => {
it("should handle SET_SORT_BY", () => { it("should handle SET_SORT_BY", () => {
const newState = reducer(undefined, { const newState = reducer(undefined, {
type: actions.SET_SORT_BY, type: actions.SET_SORT_BY,
sortBy: "name" sortBy: SORT_BY_NAME
}) })
expect(newState.sortBy).toEqual("name") expect(newState.sortBy).toEqual(SORT_BY_NAME)
}) })
it("should handle SET_SORT_ORDER", () => { it("should handle SET_SORT_ORDER", () => {
const newState = reducer(undefined, { const newState = reducer(undefined, {
type: actions.SET_SORT_ORDER, type: actions.SET_SORT_ORDER,
sortOrder: true sortOrder: SORT_ORDER_ASC
}) })
expect(newState.sortOrder).toEqual(true) expect(newState.sortOrder).toEqual(SORT_ORDER_ASC)
}) })
it("should handle SET_CURRENT_PREFIX", () => { it("should handle SET_CURRENT_PREFIX", () => {
const newState = reducer( const newState = reducer(
{ currentPrefix: "test1/", marker: "abc", isTruncated: true }, { currentPrefix: "test1/" },
{ {
type: actions.SET_CURRENT_PREFIX, type: actions.SET_CURRENT_PREFIX,
prefix: "test2/" prefix: "test2/"
} }
) )
expect(newState.currentPrefix).toEqual("test2/") expect(newState.currentPrefix).toEqual("test2/")
expect(newState.marker).toEqual("")
expect(newState.isTruncated).toBeFalsy()
}) })
it("should handle SET_PREFIX_WRITABLE", () => { it("should handle SET_PREFIX_WRITABLE", () => {

View File

@ -16,15 +16,26 @@
import web from "../web" import web from "../web"
import history from "../history" import history from "../history"
import { sortObjectsByName, sortObjectsBySize, sortObjectsByDate } from "../utils" import {
sortObjectsByName,
sortObjectsBySize,
sortObjectsByDate
} from "../utils"
import { getCurrentBucket } from "../buckets/selectors" import { getCurrentBucket } from "../buckets/selectors"
import { getCurrentPrefix, getCheckedList } from "./selectors" import { getCurrentPrefix, getCheckedList } from "./selectors"
import * as alertActions from "../alert/actions" import * as alertActions from "../alert/actions"
import * as bucketActions from "../buckets/actions" import * as bucketActions from "../buckets/actions"
import { minioBrowserPrefix } from "../constants" import {
minioBrowserPrefix,
SORT_BY_NAME,
SORT_BY_SIZE,
SORT_BY_LAST_MODIFIED,
SORT_ORDER_ASC,
SORT_ORDER_DESC
} from "../constants"
export const SET_LIST = "objects/SET_LIST" export const SET_LIST = "objects/SET_LIST"
export const RESET_LIST = "object/RESET_LIST" export const RESET_LIST = "objects/RESET_LIST"
export const APPEND_LIST = "objects/APPEND_LIST" export const APPEND_LIST = "objects/APPEND_LIST"
export const REMOVE = "objects/REMOVE" export const REMOVE = "objects/REMOVE"
export const SET_SORT_BY = "objects/SET_SORT_BY" export const SET_SORT_BY = "objects/SET_SORT_BY"
@ -35,34 +46,35 @@ export const SET_SHARE_OBJECT = "objects/SET_SHARE_OBJECT"
export const CHECKED_LIST_ADD = "objects/CHECKED_LIST_ADD" export const CHECKED_LIST_ADD = "objects/CHECKED_LIST_ADD"
export const CHECKED_LIST_REMOVE = "objects/CHECKED_LIST_REMOVE" export const CHECKED_LIST_REMOVE = "objects/CHECKED_LIST_REMOVE"
export const CHECKED_LIST_RESET = "objects/CHECKED_LIST_RESET" export const CHECKED_LIST_RESET = "objects/CHECKED_LIST_RESET"
export const SET_LIST_LOADING = "objects/SET_LIST_LOADING"
export const setList = (objects, marker, isTruncated) => ({ export const setList = objects => ({
type: SET_LIST, type: SET_LIST,
objects, objects
marker,
isTruncated
}) })
export const resetList = () => ({ export const resetList = () => ({
type: RESET_LIST type: RESET_LIST
}) })
export const appendList = (objects, marker, isTruncated) => ({ export const setListLoading = listLoading => ({
type: APPEND_LIST, type: SET_LIST_LOADING,
objects, listLoading
marker,
isTruncated
}) })
export const fetchObjects = append => { export const fetchObjects = () => {
return function(dispatch, getState) { return function(dispatch, getState) {
const {buckets: {currentBucket}, objects: {currentPrefix, marker}} = getState() dispatch(resetList())
const {
buckets: { currentBucket },
objects: { currentPrefix }
} = getState()
if (currentBucket) { if (currentBucket) {
dispatch(setListLoading(true))
return web return web
.ListObjects({ .ListObjects({
bucketName: currentBucket, bucketName: currentBucket,
prefix: currentPrefix, prefix: currentPrefix
marker: append ? marker : ""
}) })
.then(res => { .then(res => {
let objects = [] let objects = []
@ -74,14 +86,16 @@ export const fetchObjects = append => {
} }
}) })
} }
if (append) {
dispatch(appendList(objects, res.nextmarker, res.istruncated)) const sortBy = SORT_BY_LAST_MODIFIED
} else { const sortOrder = SORT_ORDER_DESC
dispatch(setList(objects, res.nextmarker, res.istruncated)) dispatch(setSortBy(sortBy))
dispatch(setSortBy("")) dispatch(setSortOrder(sortOrder))
dispatch(setSortOrder(false)) const sortedList = sortObjectsList(objects, sortBy, sortOrder)
} dispatch(setList(sortedList))
dispatch(setPrefixWritable(res.writable)) dispatch(setPrefixWritable(res.writable))
dispatch(setListLoading(false))
}) })
.catch(err => { .catch(err => {
if (web.LoggedIn()) { if (web.LoggedIn()) {
@ -96,6 +110,7 @@ export const fetchObjects = append => {
} else { } else {
history.push("/login") history.push("/login")
} }
dispatch(setListLoading(false))
}) })
} }
} }
@ -103,26 +118,27 @@ export const fetchObjects = append => {
export const sortObjects = sortBy => { export const sortObjects = sortBy => {
return function(dispatch, getState) { return function(dispatch, getState) {
const {objects} = getState() const { objects } = getState()
const sortOrder = objects.sortBy == sortBy ? !objects.sortOrder : true let sortOrder = SORT_ORDER_ASC
// Reverse sort order if the list is already sorted on same field
if (objects.sortBy === sortBy && objects.sortOrder === SORT_ORDER_ASC) {
sortOrder = SORT_ORDER_DESC
}
dispatch(setSortBy(sortBy)) dispatch(setSortBy(sortBy))
dispatch(setSortOrder(sortOrder)) dispatch(setSortOrder(sortOrder))
let list const sortedList = sortObjectsList(objects.list, sortBy, sortOrder)
switch (sortBy) { dispatch(setList(sortedList))
case "name": }
list = sortObjectsByName(objects.list, sortOrder) }
break
case "size": const sortObjectsList = (list, sortBy, sortOrder) => {
list = sortObjectsBySize(objects.list, sortOrder) switch (sortBy) {
break case SORT_BY_NAME:
case "last-modified": return sortObjectsByName(list, sortOrder)
list = sortObjectsByDate(objects.list, sortOrder) case SORT_BY_SIZE:
break return sortObjectsBySize(list, sortOrder)
default: case SORT_BY_LAST_MODIFIED:
list = objects.list return sortObjectsByDate(list, sortOrder)
break
}
dispatch(setList(list, objects.marker, objects.isTruncated))
} }
} }
@ -229,7 +245,16 @@ export const shareObject = (object, days, hours, minutes) => {
) )
}) })
} else { } else {
dispatch(showShareObject(object, `${location.host}` + '/' + `${currentBucket}` + '/' + encodeURI(objectName))) dispatch(
showShareObject(
object,
`${location.host}` +
"/" +
`${currentBucket}` +
"/" +
encodeURI(objectName)
)
)
dispatch( dispatch(
alertActions.set({ alertActions.set({
type: "success", type: "success",
@ -322,13 +347,14 @@ export const downloadCheckedObjects = () => {
}${minioBrowserPrefix}/zip?token=${res.token}` }${minioBrowserPrefix}/zip?token=${res.token}`
downloadZip(requestUrl, req, dispatch) downloadZip(requestUrl, req, dispatch)
}) })
.catch(err => dispatch( .catch(err =>
alertActions.set({ dispatch(
type: "danger", alertActions.set({
message: err.message type: "danger",
}) message: err.message
})
)
) )
)
} }
} }
} }
@ -351,7 +377,8 @@ const downloadZip = (url, req, dispatch) => {
var separator = req.prefix.length > 1 ? "-" : "" var separator = req.prefix.length > 1 ? "-" : ""
anchor.href = blobUrl anchor.href = blobUrl
anchor.download = req.bucketName + separator + req.prefix.slice(0, -1) + ".zip" anchor.download =
req.bucketName + separator + req.prefix.slice(0, -1) + ".zip"
anchor.click() anchor.click()
window.URL.revokeObjectURL(blobUrl) window.URL.revokeObjectURL(blobUrl)

View File

@ -15,6 +15,7 @@
*/ */
import * as actionsObjects from "./actions" import * as actionsObjects from "./actions"
import { SORT_ORDER_ASC } from "../constants"
const removeObject = (list, objectToRemove, lookup) => { const removeObject = (list, objectToRemove, lookup) => {
const idx = list.findIndex(object => lookup(object) === objectToRemove) const idx = list.findIndex(object => lookup(object) === objectToRemove)
@ -27,11 +28,10 @@ const removeObject = (list, objectToRemove, lookup) => {
export default ( export default (
state = { state = {
list: [], list: [],
listLoading: false,
sortBy: "", sortBy: "",
sortOrder: false, sortOrder: SORT_ORDER_ASC,
currentPrefix: "", currentPrefix: "",
marker: "",
isTruncated: false,
prefixWritable: false, prefixWritable: false,
shareObject: { shareObject: {
show: false, show: false,
@ -46,23 +46,17 @@ export default (
case actionsObjects.SET_LIST: case actionsObjects.SET_LIST:
return { return {
...state, ...state,
list: action.objects, list: action.objects
marker: action.marker,
isTruncated: action.isTruncated
} }
case actionsObjects.RESET_LIST: case actionsObjects.RESET_LIST:
return { return {
...state, ...state,
list: [], list: []
marker: "",
isTruncated: false
} }
case actionsObjects.APPEND_LIST: case actionsObjects.SET_LIST_LOADING:
return { return {
...state, ...state,
list: [...state.list, ...action.objects], listLoading: action.listLoading
marker: action.marker,
isTruncated: action.isTruncated
} }
case actionsObjects.REMOVE: case actionsObjects.REMOVE:
return { return {
@ -82,9 +76,7 @@ export default (
case actionsObjects.SET_CURRENT_PREFIX: case actionsObjects.SET_CURRENT_PREFIX:
return { return {
...state, ...state,
currentPrefix: action.prefix, currentPrefix: action.prefix
marker: "",
isTruncated: false
} }
case actionsObjects.SET_PREFIX_WRITABLE: case actionsObjects.SET_PREFIX_WRITABLE:
return { return {

View File

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { minioBrowserPrefix } from "./constants.js" import { minioBrowserPrefix, SORT_ORDER_DESC } from "./constants.js"
export const sortObjectsByName = (objects, order) => { export const sortObjectsByName = (objects, order) => {
let folders = objects.filter(object => object.name.endsWith("/")) let folders = objects.filter(object => object.name.endsWith("/"))
@ -29,7 +29,7 @@ export const sortObjectsByName = (objects, order) => {
if (a.name.toLowerCase() > b.name.toLowerCase()) return 1 if (a.name.toLowerCase() > b.name.toLowerCase()) return 1
return 0 return 0
}) })
if (order) { if (order === SORT_ORDER_DESC) {
folders = folders.reverse() folders = folders.reverse()
files = files.reverse() files = files.reverse()
} }
@ -40,7 +40,7 @@ export const sortObjectsBySize = (objects, order) => {
let folders = objects.filter(object => object.name.endsWith("/")) let folders = objects.filter(object => object.name.endsWith("/"))
let files = objects.filter(object => !object.name.endsWith("/")) let files = objects.filter(object => !object.name.endsWith("/"))
files = files.sort((a, b) => a.size - b.size) files = files.sort((a, b) => a.size - b.size)
if (order) files = files.reverse() if (order === SORT_ORDER_DESC) files = files.reverse()
return [...folders, ...files] return [...folders, ...files]
} }
@ -51,7 +51,7 @@ export const sortObjectsByDate = (objects, order) => {
(a, b) => (a, b) =>
new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime() new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime()
) )
if (order) files = files.reverse() if (order === SORT_ORDER_DESC) files = files.reverse()
return [...folders, ...files] return [...folders, ...files]
} }

View File

@ -43,6 +43,9 @@ header.fesl-row {
color: @dark-gray; color: @dark-gray;
font-size: 14px; font-size: 14px;
} }
& > .fesli-sort--active {
.opacity(0.5);
}
&:hover:not(.fesl-item-actions) { &:hover:not(.fesl-item-actions) {
background: lighten(@text-muted-color, 22%); background: lighten(@text-muted-color, 22%);

View File

@ -113,4 +113,41 @@
margin: 0; margin: 0;
vertical-align: top; vertical-align: top;
} }
}
.loading {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-top: 1px solid @loading-track-bg;
border-right: 1px solid @loading-track-bg;
border-bottom: 1px solid @loading-track-bg;
border-left: 1px solid @loading-point-bg;
transform: translateZ(0);
animation: loading 1.1s infinite linear;
border-radius: 50%;
width: 35px;
height: 35px;
margin-top: 30px;
}
@-webkit-keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }

View File

@ -100,4 +100,10 @@
List List
--------------------------*/ --------------------------*/
@list-row-selected-bg: #fbf2bf; @list-row-selected-bg: #fbf2bf;
@list-row-even-bg: #fafafa; @list-row-even-bg: #fafafa;
/*--------------------------
Loading
---------------------------*/
@loading-track-bg: #eeeeee;
@loading-point-bg: #00303f;

File diff suppressed because one or more lines are too long

View File

@ -401,11 +401,9 @@ type ListObjectsArgs struct {
// ListObjectsRep - list objects response. // ListObjectsRep - list objects response.
type ListObjectsRep struct { type ListObjectsRep struct {
Objects []WebObjectInfo `json:"objects"` Objects []WebObjectInfo `json:"objects"`
NextMarker string `json:"nextmarker"` Writable bool `json:"writable"` // Used by client to show "upload file" button.
IsTruncated bool `json:"istruncated"` UIVersion string `json:"uiVersion"`
Writable bool `json:"writable"` // Used by client to show "upload file" button.
UIVersion string `json:"uiVersion"`
} }
// WebObjectInfo container for list objects metadata. // WebObjectInfo container for list objects metadata.
@ -448,26 +446,36 @@ func (web *webAPIHandlers) ListObjects(r *http.Request, args *ListObjectsArgs, r
if err != nil { if err != nil {
return toJSONError(ctx, err, args.BucketName) return toJSONError(ctx, err, args.BucketName)
} }
result, err := core.ListObjects(args.BucketName, args.Prefix, args.Marker, slashSeparator, 1000)
if err != nil { nextMarker := ""
return toJSONError(ctx, err, args.BucketName) // Fetch all the objects
for {
result, err := core.ListObjects(args.BucketName, args.Prefix, nextMarker, slashSeparator, 1000)
if err != nil {
return toJSONError(ctx, err, args.BucketName)
}
for _, obj := range result.Contents {
reply.Objects = append(reply.Objects, WebObjectInfo{
Key: obj.Key,
LastModified: obj.LastModified,
Size: obj.Size,
ContentType: obj.ContentType,
})
}
for _, p := range result.CommonPrefixes {
reply.Objects = append(reply.Objects, WebObjectInfo{
Key: p.Prefix,
})
}
nextMarker = result.NextMarker
// Return when there are no more objects
if !result.IsTruncated {
return nil
}
} }
reply.NextMarker = result.NextMarker
reply.IsTruncated = result.IsTruncated
for _, obj := range result.Contents {
reply.Objects = append(reply.Objects, WebObjectInfo{
Key: obj.Key,
LastModified: obj.LastModified,
Size: obj.Size,
ContentType: obj.ContentType,
})
}
for _, p := range result.CommonPrefixes {
reply.Objects = append(reply.Objects, WebObjectInfo{
Key: p.Prefix,
})
}
return nil
} }
claims, owner, authErr := webRequestAuthenticate(r) claims, owner, authErr := webRequestAuthenticate(r)
@ -551,35 +559,43 @@ func (web *webAPIHandlers) ListObjects(r *http.Request, args *ListObjectsArgs, r
return toJSONError(ctx, errInvalidBucketName) return toJSONError(ctx, errInvalidBucketName)
} }
lo, err := listObjects(ctx, args.BucketName, args.Prefix, args.Marker, slashSeparator, 1000) nextMarker := ""
if err != nil { // Fetch all the objects
return &json2.Error{Message: err.Error()} for {
} lo, err := listObjects(ctx, args.BucketName, args.Prefix, nextMarker, slashSeparator, 1000)
for i := range lo.Objects { if err != nil {
if crypto.IsEncrypted(lo.Objects[i].UserDefined) { return &json2.Error{Message: err.Error()}
lo.Objects[i].Size, err = lo.Objects[i].DecryptedSize() }
if err != nil { for i := range lo.Objects {
return toJSONError(ctx, err) if crypto.IsEncrypted(lo.Objects[i].UserDefined) {
lo.Objects[i].Size, err = lo.Objects[i].DecryptedSize()
if err != nil {
return toJSONError(ctx, err)
}
} }
} }
}
reply.NextMarker = lo.NextMarker
reply.IsTruncated = lo.IsTruncated
for _, obj := range lo.Objects {
reply.Objects = append(reply.Objects, WebObjectInfo{
Key: obj.Name,
LastModified: obj.ModTime,
Size: obj.Size,
ContentType: obj.ContentType,
})
}
for _, prefix := range lo.Prefixes {
reply.Objects = append(reply.Objects, WebObjectInfo{
Key: prefix,
})
}
return nil for _, obj := range lo.Objects {
reply.Objects = append(reply.Objects, WebObjectInfo{
Key: obj.Name,
LastModified: obj.ModTime,
Size: obj.Size,
ContentType: obj.ContentType,
})
}
for _, prefix := range lo.Prefixes {
reply.Objects = append(reply.Objects, WebObjectInfo{
Key: prefix,
})
}
nextMarker = lo.NextMarker
// Return when there are no more objects
if !lo.IsTruncated {
return nil
}
}
} }
// RemoveObjectArgs - args to remove an object, JSON will look like. // RemoveObjectArgs - args to remove an object, JSON will look like.