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

Make ServerDashboard functional

Browse Source
This commit is contained in:
Nathan Barber
2021-04-07 12:27:01 -04:00
parent c3fc549bd6
commit 7e132f22e6
4 changed files with 267 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
jsx/build/admin-react.js
View File

File diff suppressed because one or more lines are too long

2
jsx/src/components/ServerDashboard/ServerDashboard.js
View File

@@ -2,7 +2,7 @@ import React, { Component } from "react";
import { compose, withProps, withHandlers } from "recompose"; import { compose, withProps, withHandlers } from "recompose";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { jhapiRequest } from "../../util/jhapiUtil"; import { jhapiRequest } from "../../util/jhapiUtil";
import { ServerDashboard } from "./ServerDashboard.pre"; import ServerDashboard from "./ServerDashboard.pre";
const withHubActions = withProps((props) => ({ const withHubActions = withProps((props) => ({
updateUsers: (cb) => jhapiRequest("/users", "GET"), updateUsers: (cb) => jhapiRequest("/users", "GET"),

547
jsx/src/components/ServerDashboard/ServerDashboard.pre.jsx
View File

@@ -1,316 +1,281 @@
import React, { Component } from "react"; import React, { useState } from "react";
import { Table, Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import "./server-dashboard.css"; import "./server-dashboard.css";
import { timeSince } from "../../util/timeSince"; import { timeSince } from "../../util/timeSince";
import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa"; import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export class ServerDashboard extends Component { const ServerDashboard = (props) => {
static get propTypes() { // sort methods
return { var usernameDesc = (e) => e.sort((a, b) => (a.name > b.name ? 1 : -1)),
user_data: PropTypes.array, usernameAsc = (e) => e.sort((a, b) => (a.name < b.name ? 1 : -1)),
updateUsers: PropTypes.func, adminDesc = (e) => e.sort((a) => (a.admin ? -1 : 1)),
shutdownHub: PropTypes.func, adminAsc = (e) => e.sort((a) => (a.admin ? 1 : -1)),
startServer: PropTypes.func, dateDesc = (e) =>
stopServer: PropTypes.func, e.sort((a, b) =>
startAll: PropTypes.func, new Date(a.last_activity) - new Date(b.last_activity) > 0 ? -1 : 1
stopAll: PropTypes.func, ),
dispatch: PropTypes.func, dateAsc = (e) =>
history: PropTypes.shape({ e.sort((a, b) =>
push: PropTypes.func, new Date(a.last_activity) - new Date(b.last_activity) > 0 ? 1 : -1
}), ),
}; runningAsc = (e) => e.sort((a) => (a.server == null ? -1 : 1)),
} runningDesc = (e) => e.sort((a) => (a.server == null ? 1 : -1));
constructor(props) { var [addUser, setAddUser] = useState(false),
super(props); [sortMethod, setSortMethod] = useState(undefined);
(this.usernameDesc = (e) => e.sort((a, b) => (a.name > b.name ? 1 : -1))), var {
(this.usernameAsc = (e) => e.sort((a, b) => (a.name < b.name ? 1 : -1))), user_data,
(this.adminDesc = (e) => e.sort((a) => (a.admin ? -1 : 1))), updateUsers,
(this.adminAsc = (e) => e.sort((a) => (a.admin ? 1 : -1))), shutdownHub,
(this.dateDesc = (e) => startServer,
e.sort((a, b) => stopServer,
new Date(a.last_activity) - new Date(b.last_activity) > 0 ? -1 : 1 startAll,
)), stopAll,
(this.dateAsc = (e) => history,
e.sort((a, b) => dispatch,
new Date(a.last_activity) - new Date(b.last_activity) > 0 ? 1 : -1 } = props;
)),
(this.runningAsc = (e) => e.sort((a) => (a.server == null ? -1 : 1))),
(this.runningDesc = (e) => e.sort((a) => (a.server == null ? 1 : -1)));
this.state = { var dispatchUserUpdate = (data) => {
addUser: false, dispatch({
sortMethod: undefined, type: "USER_DATA",
}; value: data,
} });
};
render() { if (!user_data) return <div></div>;
var {
user_data,
updateUsers,
shutdownHub,
startServer,
stopServer,
startAll,
stopAll,
dispatch,
} = this.props;
var dispatchUserUpdate = (data) => { if (sortMethod != undefined) user_data = sortMethod(user_data);
dispatch({
type: "USER_DATA",
value: data,
});
};
if (!user_data) return <div></div>; return (
<div className="container">
if (this.state.sortMethod != undefined) <div className="manage-groups" style={{ float: "right", margin: "20px" }}>
user_data = this.state.sortMethod(user_data); <Link to="/groups">{"> Manage Groups"}</Link>
</div>
return ( <div className="server-dashboard-container">
<div className="container"> <table className="table table-striped table-bordered table-hover">
<div <thead className="admin-table-head">
className="manage-groups" <tr>
style={{ float: "right", margin: "20px" }} <th id="user-header">
> User{" "}
<Link to="/groups">{"> Manage Groups"}</Link> <SortHandler
</div> sorts={{ asc: usernameAsc, desc: usernameDesc }}
<div className="server-dashboard-container"> callback={(method) => setSortMethod(method)}
<table className="table table-striped table-bordered table-hover"> />
<thead className="admin-table-head"> </th>
<tr> <th id="admin-header">
<th id="user-header"> Admin{" "}
User{" "} <SortHandler
<SortHandler sorts={{ asc: adminAsc, desc: adminDesc }}
sorts={{ asc: this.usernameAsc, desc: this.usernameDesc }} callback={(method) => setSortMethod(method)}
callback={(e) => />
this.setState( </th>
Object.assign({}, this.state, { sortMethod: e }) <th id="last-activity-header">
) Last Activity{" "}
} <SortHandler
/> sorts={{ asc: dateAsc, desc: dateDesc }}
</th> callback={(method) => setSortMethod(method)}
<th id="admin-header"> />
Admin{" "} </th>
<SortHandler <th id="running-status-header">
sorts={{ asc: this.adminAsc, desc: this.adminDesc }} Running{" "}
callback={(e) => <SortHandler
this.setState( sorts={{ asc: runningAsc, desc: runningDesc }}
Object.assign({}, this.state, { sortMethod: e }) callback={(method) => setSortMethod(method)}
) />
} </th>
/> <th id="actions-header">Actions</th>
</th> </tr>
<th id="last-activity-header"> </thead>
Last Activity{" "} <tbody>
<SortHandler <tr className="noborder">
sorts={{ asc: this.dateAsc, desc: this.dateDesc }} <td>
callback={(e) => <Button variant="light" className="add-users-button">
this.setState( <Link to="/add-users">Add Users</Link>
Object.assign({}, this.state, { sortMethod: e }) </Button>
) </td>
} <td></td>
/> <td></td>
</th> <td>
<th id="running-status-header"> {/* Start all servers */}
Running{" "} <Button
<SortHandler variant="primary"
sorts={{ asc: this.runningAsc, desc: this.runningDesc }} className="start-all"
callback={(e) => onClick={() => {
this.setState( Promise.all(startAll(user_data.map((e) => e.name)))
Object.assign({}, this.state, { sortMethod: e }) .then((res) => {
) updateUsers()
} .then((data) => data.json())
/> .then((data) => {
</th> dispatchUserUpdate(data);
<th id="actions-header">Actions</th> })
</tr> .catch((err) => console.log(err));
</thead> return res;
<tbody> })
<tr className="noborder"> .catch((err) => console.log(err));
}}
>
Start All
</Button>
<span> </span>
{/* Stop all servers */}
<Button
variant="danger"
className="stop-all"
onClick={() => {
Promise.all(stopAll(user_data.map((e) => e.name)))
.then((res) => {
updateUsers()
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
})
.catch((err) => console.log(err));
return res;
})
.catch((err) => console.log(err));
}}
>
Stop All
</Button>
</td>
<td>
{/* Shutdown Jupyterhub */}
<Button
variant="danger"
className="shutdown-button"
onClick={shutdownHub}
>
Shutdown Hub
</Button>
</td>
</tr>
{user_data.map((e, i) => (
<tr key={i + "row"} className="user-row">
<td>{e.name}</td>
<td>{e.admin ? "admin" : ""}</td>
<td> <td>
<Button variant="light" className="add-users-button"> {e.last_activity ? timeSince(e.last_activity) : "Never"}
<Link to="/add-users">Add Users</Link>
</Button>
</td>
<td></td>
<td></td>
<td>
{/* Start all servers */}
<Button
variant="primary"
className="start-all"
onClick={() => {
Promise.all(startAll(user_data.map((e) => e.name)))
.then((res) => {
updateUsers()
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
})
.catch((err) => console.log(err));
return res;
})
.catch((err) => console.log(err));
}}
>
Start All
</Button>
<span> </span>
{/* Stop all servers */}
<Button
variant="danger"
className="stop-all"
onClick={() => {
Promise.all(stopAll(user_data.map((e) => e.name)))
.then((res) => {
updateUsers()
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
})
.catch((err) => console.log(err));
return res;
})
.catch((err) => console.log(err));
}}
>
Stop All
</Button>
</td> </td>
<td> <td>
{/* Shutdown Jupyterhub */} {e.server != null ? (
<Button // Stop Single-user server
variant="danger"
className="shutdown-button"
onClick={shutdownHub}
>
Shutdown Hub
</Button>
</td>
</tr>
{user_data.map((e, i) => (
<tr key={i + "row"} className="user-row">
<td>{e.name}</td>
<td>{e.admin ? "admin" : ""}</td>
<td>
{e.last_activity ? timeSince(e.last_activity) : "Never"}
</td>
<td>
{e.server != null ? (
// Stop Single-user server
<button
className="btn btn-danger btn-xs stop-button"
onClick={() =>
stopServer(e.name)
.then((res) => {
updateUsers()
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
});
return res;
})
.catch((err) => console.log(err))
}
>
Stop Server
</button>
) : (
// Start Single-user server
<button
className="btn btn-primary btn-xs start-button"
onClick={() =>
startServer(e.name)
.then((res) => {
updateUsers()
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
});
return res;
})
.catch((err) => console.log(err))
}
>
Start Server
</button>
)}
</td>
<td>
{/* Edit User */}
<button <button
className="btn btn-primary btn-xs" className="btn btn-danger btn-xs stop-button"
style={{ marginRight: 20 }}
onClick={() => onClick={() =>
this.props.history.push({ stopServer(e.name)
pathname: "/edit-user", .then((res) => {
state: { updateUsers()
username: e.name, .then((data) => data.json())
has_admin: e.admin, .then((data) => {
}, dispatchUserUpdate(data);
}) });
return res;
})
.catch((err) => console.log(err))
} }
> >
edit user Stop Server
</button> </button>
</td> ) : (
</tr> // Start Single-user server
))} <button
</tbody> className="btn btn-primary btn-xs start-button"
</table> onClick={() =>
</div> startServer(e.name)
.then((res) => {
updateUsers()
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
});
return res;
})
.catch((err) => console.log(err))
}
>
Start Server
</button>
)}
</td>
<td>
{/* Edit User */}
<button
className="btn btn-primary btn-xs"
style={{ marginRight: 20 }}
onClick={() =>
history.push({
pathname: "/edit-user",
state: {
username: e.name,
has_admin: e.admin,
},
})
}
>
edit user
</button>
</td>
</tr>
))}
</tbody>
</table>
</div> </div>
); </div>
} );
} };
class SortHandler extends Component { ServerDashboard.propTypes = {
static get propTypes() { user_data: PropTypes.array,
return { updateUsers: PropTypes.func,
sorts: PropTypes.object, shutdownHub: PropTypes.func,
callback: PropTypes.func, startServer: PropTypes.func,
}; stopServer: PropTypes.func,
} startAll: PropTypes.func,
stopAll: PropTypes.func,
dispatch: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
constructor(props) { const SortHandler = (props) => {
super(props); var { sorts, callback } = props;
this.state = {
direction: undefined,
};
}
render() { var [direction, setDirection] = useState(undefined);
let { sorts, callback } = this.props;
return ( return (
<div <div
className="sort-icon" className="sort-icon"
onClick={() => { onClick={() => {
if (!this.state.direction) { if (!direction) {
callback(sorts.desc); callback(sorts.desc);
this.setState({ direction: "desc" }); setDirection("desc");
} else if (this.state.direction == "asc") { } else if (direction == "asc") {
callback(sorts.desc); callback(sorts.desc);
this.setState({ direction: "desc" }); setDirection("desc");
} else { } else {
callback(sorts.asc); callback(sorts.asc);
this.setState({ direction: "asc" }); setDirection("asc");
} }
}} }}
> >
{!this.state.direction ? ( {!direction ? (
<FaSort /> <FaSort />
) : this.state.direction == "asc" ? ( ) : direction == "asc" ? (
<FaSortDown /> <FaSortDown />
) : ( ) : (
<FaSortUp /> <FaSortUp />
)} )}
</div> </div>
); );
} };
}
SortHandler.propTypes = {
sorts: PropTypes.object,
callback: PropTypes.func,
};
export default ServerDashboard;

10
share/jupyterhub/static/js/admin-react.js
View File

File diff suppressed because one or more lines are too long