hazza/jupyterhub
1
0
Fork 0
mirror of https://github.com/jupyterhub/jupyterhub.git synced 2025-10-18 07:23:00 +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 { connect } from "react-redux";
import { jhapiRequest } from "../../util/jhapiUtil";
import { ServerDashboard } from "./ServerDashboard.pre";
import ServerDashboard from "./ServerDashboard.pre";
const withHubActions = withProps((props) => ({
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 { Table, Button } from "react-bootstrap";
import React, { useState } from "react";
import { Button } from "react-bootstrap";
import { Link } from "react-router-dom";
import "./server-dashboard.css";
import { timeSince } from "../../util/timeSince";
import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
import PropTypes from "prop-types";
export class ServerDashboard extends Component {
static get propTypes() {
return {
user_data: PropTypes.array,
updateUsers: PropTypes.func,
shutdownHub: PropTypes.func,
startServer: PropTypes.func,
stopServer: PropTypes.func,
startAll: PropTypes.func,
stopAll: PropTypes.func,
dispatch: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
}
const ServerDashboard = (props) => {
// sort methods
var usernameDesc = (e) => e.sort((a, b) => (a.name > b.name ? 1 : -1)),
usernameAsc = (e) => e.sort((a, b) => (a.name < b.name ? 1 : -1)),
adminDesc = (e) => e.sort((a) => (a.admin ? -1 : 1)),
adminAsc = (e) => e.sort((a) => (a.admin ? 1 : -1)),
dateDesc = (e) =>
e.sort((a, b) =>
new Date(a.last_activity) - new Date(b.last_activity) > 0 ? -1 : 1
),
dateAsc = (e) =>
e.sort((a, b) =>
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) {
super(props);
var [addUser, setAddUser] = useState(false),
[sortMethod, setSortMethod] = useState(undefined);
(this.usernameDesc = (e) => e.sort((a, b) => (a.name > b.name ? 1 : -1))),
(this.usernameAsc = (e) => e.sort((a, b) => (a.name < b.name ? 1 : -1))),
(this.adminDesc = (e) => e.sort((a) => (a.admin ? -1 : 1))),
(this.adminAsc = (e) => e.sort((a) => (a.admin ? 1 : -1))),
(this.dateDesc = (e) =>
e.sort((a, b) =>
new Date(a.last_activity) - new Date(b.last_activity) > 0 ? -1 : 1
)),
(this.dateAsc = (e) =>
e.sort((a, b) =>
new Date(a.last_activity) - new Date(b.last_activity) > 0 ? 1 : -1
)),
(this.runningAsc = (e) => e.sort((a) => (a.server == null ? -1 : 1))),
(this.runningDesc = (e) => e.sort((a) => (a.server == null ? 1 : -1)));
var {
user_data,
updateUsers,
shutdownHub,
startServer,
stopServer,
startAll,
stopAll,
history,
dispatch,
} = props;
this.state = {
addUser: false,
sortMethod: undefined,
};
}
var dispatchUserUpdate = (data) => {
dispatch({
type: "USER_DATA",
value: data,
});
};
render() {
var {
user_data,
updateUsers,
shutdownHub,
startServer,
stopServer,
startAll,
stopAll,
dispatch,
} = this.props;
if (!user_data) return <div></div>;
var dispatchUserUpdate = (data) => {
dispatch({
type: "USER_DATA",
value: data,
});
};
if (sortMethod != undefined) user_data = sortMethod(user_data);
if (!user_data) return <div></div>;
if (this.state.sortMethod != undefined)
user_data = this.state.sortMethod(user_data);
return (
<div className="container">
<div
className="manage-groups"
style={{ float: "right", margin: "20px" }}
>
<Link to="/groups">{"> Manage Groups"}</Link>
</div>
<div className="server-dashboard-container">
<table className="table table-striped table-bordered table-hover">
<thead className="admin-table-head">
<tr>
<th id="user-header">
User{" "}
<SortHandler
sorts={{ asc: this.usernameAsc, desc: this.usernameDesc }}
callback={(e) =>
this.setState(
Object.assign({}, this.state, { sortMethod: e })
)
}
/>
</th>
<th id="admin-header">
Admin{" "}
<SortHandler
sorts={{ asc: this.adminAsc, desc: this.adminDesc }}
callback={(e) =>
this.setState(
Object.assign({}, this.state, { sortMethod: e })
)
}
/>
</th>
<th id="last-activity-header">
Last Activity{" "}
<SortHandler
sorts={{ asc: this.dateAsc, desc: this.dateDesc }}
callback={(e) =>
this.setState(
Object.assign({}, this.state, { sortMethod: e })
)
}
/>
</th>
<th id="running-status-header">
Running{" "}
<SortHandler
sorts={{ asc: this.runningAsc, desc: this.runningDesc }}
callback={(e) =>
this.setState(
Object.assign({}, this.state, { sortMethod: e })
)
}
/>
</th>
<th id="actions-header">Actions</th>
</tr>
</thead>
<tbody>
<tr className="noborder">
return (
<div className="container">
<div className="manage-groups" style={{ float: "right", margin: "20px" }}>
<Link to="/groups">{"> Manage Groups"}</Link>
</div>
<div className="server-dashboard-container">
<table className="table table-striped table-bordered table-hover">
<thead className="admin-table-head">
<tr>
<th id="user-header">
User{" "}
<SortHandler
sorts={{ asc: usernameAsc, desc: usernameDesc }}
callback={(method) => setSortMethod(method)}
/>
</th>
<th id="admin-header">
Admin{" "}
<SortHandler
sorts={{ asc: adminAsc, desc: adminDesc }}
callback={(method) => setSortMethod(method)}
/>
</th>
<th id="last-activity-header">
Last Activity{" "}
<SortHandler
sorts={{ asc: dateAsc, desc: dateDesc }}
callback={(method) => setSortMethod(method)}
/>
</th>
<th id="running-status-header">
Running{" "}
<SortHandler
sorts={{ asc: runningAsc, desc: runningDesc }}
callback={(method) => setSortMethod(method)}
/>
</th>
<th id="actions-header">Actions</th>
</tr>
</thead>
<tbody>
<tr className="noborder">
<td>
<Button variant="light" className="add-users-button">
<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>
{/* 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>
<Button variant="light" className="add-users-button">
<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>
{e.last_activity ? timeSince(e.last_activity) : "Never"}
</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>
{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 */}
{e.server != null ? (
// Stop Single-user server
<button
className="btn btn-primary btn-xs"
style={{ marginRight: 20 }}
className="btn btn-danger btn-xs stop-button"
onClick={() =>
this.props.history.push({
pathname: "/edit-user",
state: {
username: e.name,
has_admin: e.admin,
},
})
stopServer(e.name)
.then((res) => {
updateUsers()
.then((data) => data.json())
.then((data) => {
dispatchUserUpdate(data);
});
return res;
})
.catch((err) => console.log(err))
}
>
edit user
Stop Server
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
) : (
// 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
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>
);
};
class SortHandler extends Component {
static get propTypes() {
return {
sorts: PropTypes.object,
callback: PropTypes.func,
};
}
ServerDashboard.propTypes = {
user_data: PropTypes.array,
updateUsers: PropTypes.func,
shutdownHub: 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) {
super(props);
this.state = {
direction: undefined,
};
}
const SortHandler = (props) => {
var { sorts, callback } = props;
render() {
let { sorts, callback } = this.props;
var [direction, setDirection] = useState(undefined);
return (
<div
className="sort-icon"
onClick={() => {
if (!this.state.direction) {
callback(sorts.desc);
this.setState({ direction: "desc" });
} else if (this.state.direction == "asc") {
callback(sorts.desc);
this.setState({ direction: "desc" });
} else {
callback(sorts.asc);
this.setState({ direction: "asc" });
}
}}
>
{!this.state.direction ? (
<FaSort />
) : this.state.direction == "asc" ? (
<FaSortDown />
) : (
<FaSortUp />
)}
</div>
);
}
}
return (
<div
className="sort-icon"
onClick={() => {
if (!direction) {
callback(sorts.desc);
setDirection("desc");
} else if (direction == "asc") {
callback(sorts.desc);
setDirection("desc");
} else {
callback(sorts.asc);
setDirection("asc");
}
}}
>
{!direction ? (
<FaSort />
) : direction == "asc" ? (
<FaSortDown />
) : (
<FaSortUp />
)}
</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