hazza/jupyterhub
1
0
Fork 0
mirror of https://github.com/jupyterhub/jupyterhub.git synced 2025-10-15 05:53:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add persistent URL / stateful pagination for users

Browse Source
This commit is contained in:
Nathan Barber
2021-05-05 12:55:36 -04:00
parent 144a018705
commit f1ddb58d7d
5 changed files with 65 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
jsx/src/components/ServerDashboard/ServerDashboard.jsx
View File

@@ -31,6 +31,11 @@ const ServerDashboard = (props) => {
var [sortMethod, setSortMethod] = useState(null);
var user_data = useSelector((state) => state.user_data);
var user_page = useSelector((state) => state.user_page);
var limit = useSelector((state) => state.limit);
var page = parseInt(new URLSearchParams(props.location.search).get("page"));
page = isNaN(page) ? 0 : page;
var slice = [page * limit, limit];
const dispatch = useDispatch();
@@ -51,10 +56,26 @@ const ServerDashboard = (props) => {
});
};
var dispatchPageChange = (data, page) => {
dispatch({
type: "USER_PAGE",
value: {
data: data,
page: page,
},
});
};
if (!user_data) {
return <div></div>;
}
if (page != user_page) {
updateUsers(...slice)
.then((data) => data.json())
.then((data) => dispatchPageChange(data, page));
}
if (sortMethod != null) {
user_data = sortMethod(user_data);
}
@@ -116,7 +137,7 @@ const ServerDashboard = (props) => {
onClick={() => {
Promise.all(startAll(user_data.map((e) => e.name)))
.then((res) => {
updateUsers()
updateUsers(...slice)
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
@@ -137,7 +158,7 @@ const ServerDashboard = (props) => {
onClick={() => {
Promise.all(stopAll(user_data.map((e) => e.name)))
.then((res) => {
updateUsers()
updateUsers(...slice)
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
@@ -177,7 +198,7 @@ const ServerDashboard = (props) => {
onClick={() =>
stopServer(e.name)
.then((res) => {
updateUsers()
updateUsers(...slice)
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
@@ -196,7 +217,7 @@ const ServerDashboard = (props) => {
onClick={() =>
startServer(e.name)
.then((res) => {
updateUsers()
updateUsers(...slice)
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
@@ -232,6 +253,25 @@ const ServerDashboard = (props) => {
))}
</tbody>
</table>
<br></br>
<p>
Displaying users {slice[0]}-{slice[0] + user_data.length}
{user_data.length >= limit ? (
<button className="btn btn-link">
<Link to={`/?page=${page + 1}`}>Next</Link>
</button>
) : (
<></>
)}
{page >= 1 ? (
<button className="btn btn-link">
<Link to={`/?page=${page - 1}`}>Previous</Link>
</button>
) : (
<></>
)}
</p>
<br></br>
</div>
</div>
);
@@ -249,6 +289,9 @@ ServerDashboard.propTypes = {
history: PropTypes.shape({
push: PropTypes.func,
}),
location: PropTypes.shape({
search: PropTypes.string,
}),
};
const SortHandler = (props) => {