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

Add UI error dialogues to api requests

Browse Source
This commit is contained in:
Nathan Barber
2021-11-30 15:35:00 -05:00
parent c98ef547a8
commit df67a75893
7 changed files with 175 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
jsx/src/components/AddUser/AddUser.jsx
View File

@@ -29,7 +29,16 @@ const AddUser = (props) => {
{errorAlert != null ? (
<div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div className="alert alert-danger">{errorAlert}</div>
<div className="alert alert-danger">
{errorAlert}
<button
type="button"
className="close"
onClick={() => setErrorAlert(null)}
>
<span>&times;</span>
</button>
</div>
</div>
</div>
) : (
@@ -94,7 +103,7 @@ const AddUser = (props) => {
.then(() => history.push("/"))
.catch((err) => console.log(err))
: setErrorAlert(
`[${data.status}] Failed to create user. ${
`Failed to create user. ${
data.status == 409 ? "User already exists." : ""
}`
)

19
jsx/src/components/CreateGroup/CreateGroup.jsx
View File

@@ -28,7 +28,16 @@ const CreateGroup = (props) => {
{errorAlert != null ? (
<div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div className="alert alert-danger">{errorAlert}</div>
<div className="alert alert-danger">
{errorAlert}
<button
type="button"
className="close"
onClick={() => setErrorAlert(null)}
>
<span>&times;</span>
</button>
</div>
</div>
</div>
) : (
@@ -69,16 +78,18 @@ const CreateGroup = (props) => {
? updateGroups(0, limit)
.then((data) => dispatchPageUpdate(data, 0))
.then(() => history.push("/groups"))
.catch((err) => console.log(err))
.catch((err) =>
setErrorAlert(`Could not update groups list.`)
)
: setErrorAlert(
`[${data.status}] Failed to create group. ${
`Failed to create group. ${
data.status == 409
? "Group already exists."
: ""
}`
);
})
.catch((err) => console.log(err));
.catch((err) => setErrorAlert(`Could not create group.`));
}}
>
Create

52
jsx/src/components/EditUser/EditUser.jsx
View File

@@ -44,7 +44,16 @@ const EditUser = (props) => {
{errorAlert != null ? (
<div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div className="alert alert-danger">{errorAlert}</div>
<div className="alert alert-danger">
{errorAlert}
<button
type="button"
className="close"
onClick={() => setErrorAlert(null)}
>
<span>&times;</span>
</button>
</div>
</div>
</div>
) : (
@@ -89,12 +98,16 @@ const EditUser = (props) => {
? updateUsers(0, limit)
.then((data) => dispatchPageChange(data, 0))
.then(() => history.push("/"))
.catch((err) => console.log(err))
: setErrorAlert(
`[${data.status}] Failed to edit user.`
);
.catch((err) =>
setErrorAlert(
`Could not update users list.`
)
)
: setErrorAlert(`Failed to edit user.`);
})
.catch((err) => console.log(err));
.catch((err) => {
setErrorAlert(`Failed to edit user.`);
});
}}
>
Delete user
@@ -129,17 +142,20 @@ const EditUser = (props) => {
? updateUsers(0, limit)
.then((data) => dispatchPageChange(data, 0))
.then(() => history.push("/"))
.catch((err) => console.log(err))
: setErrorAlert(
`[${data.status}] Failed to edit user.`
);
.catch((err) =>
setErrorAlert(
`Could not update users list.`
)
)
: setErrorAlert(`Failed to edit user.`);
})
.catch((err) => {
console.log(err);
setErrorAlert(`Failed to edit user.`);
});
} else {
setUpdatedUsername("");
failRegexEvent();
setErrorAlert(
`Failed to edit user. Make sure the username does not contain special characters.`
);
}
} else {
editUser(username, username, admin)
@@ -148,13 +164,13 @@ const EditUser = (props) => {
? updateUsers(0, limit)
.then((data) => dispatchPageChange(data, 0))
.then(() => history.push("/"))
.catch((err) => console.log(err))
: setErrorAlert(
`[${data.status}] Failed to edit user.`
);
.catch((err) =>
setErrorAlert(`Could not update users list.`)
)
: setErrorAlert(`Failed to edit user.`);
})
.catch((err) => {
console.log(err);
setErrorAlert(`Failed to edit user.`);
});
}
}}

25
jsx/src/components/GroupEdit/GroupEdit.jsx
View File

@@ -7,6 +7,7 @@ import GroupSelect from "../GroupSelect/GroupSelect";
const GroupEdit = (props) => {
var [selected, setSelected] = useState([]),
[changed, setChanged] = useState(false),
[errorAlert, setErrorAlert] = useState(null),
limit = useSelector((state) => state.limit);
var dispatch = useDispatch();
@@ -42,6 +43,24 @@ const GroupEdit = (props) => {
return (
<div className="container">
{errorAlert != null ? (
<div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div className="alert alert-danger">
{errorAlert}
<button
type="button"
className="close"
onClick={() => setErrorAlert(null)}
>
<span>&times;</span>
</button>
</div>
</div>
</div>
) : (
<></>
)}
<div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<h3>Editing Group {group_data.name}</h3>
@@ -89,12 +108,13 @@ const GroupEdit = (props) => {
);
Promise.all(promiseQueue)
// TODO add error if res not ok
.then(() => {
updateGroups(0, limit)
.then((data) => dispatchPageUpdate(data, 0))
.then(() => history.push("/groups"));
})
.catch((err) => console.log(err));
.catch((err) => setErrorAlert(`Could not edit group.`));
}}
>
Apply
@@ -106,12 +126,13 @@ const GroupEdit = (props) => {
onClick={() => {
var groupName = group_data.name;
deleteGroup(groupName)
// TODO add error if res not ok
.then(() => {
updateGroups(0, limit)
.then((data) => dispatchPageUpdate(data, 0))
.then(() => history.push("/groups"));
})
.catch((err) => console.log(err));
.catch((err) => setErrorAlert(`Could not delete group.`));
}}
>
Delete Group

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

@@ -27,6 +27,7 @@ const ServerDashboard = (props) => {
runningAsc = (e) => e.sort((a) => (a.server == null ? -1 : 1)),
runningDesc = (e) => e.sort((a) => (a.server == null ? 1 : -1));
var [errorAlert, setErrorAlert] = useState(null);
var [sortMethod, setSortMethod] = useState(null);
var user_data = useSelector((state) => state.user_data),
@@ -73,6 +74,24 @@ const ServerDashboard = (props) => {
return (
<div className="container">
{errorAlert != null ? (
<div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div className="alert alert-danger">
{errorAlert}
<button
type="button"
className="close"
onClick={() => setErrorAlert(null)}
>
<span>&times;</span>
</button>
</div>
</div>
</div>
) : (
<></>
)}
<div className="manage-groups" style={{ float: "right", margin: "20px" }}>
<Link to="/groups">{"> Manage Groups"}</Link>
</div>
@@ -127,15 +146,32 @@ const ServerDashboard = (props) => {
className="start-all"
onClick={() => {
Promise.all(startAll(user_data.map((e) => e.name)))
.then((res) => {
let failedServers = res.filter((e) => !e.ok);
if (failedServers.length > 0) {
setErrorAlert(
`Could not start ${failedServers.length} ${
failedServers.length > 1 ? "servers" : "server"
}. ${
failedServers.length > 1 ? "Are they " : "Is it "
} already running?`
);
}
return res;
})
.then((res) => {
updateUsers(...slice)
.then((data) => {
dispatchPageUpdate(data, page);
})
.catch((err) => console.log(err));
.catch((err) =>
setErrorAlert(`Could not update users list.`)
);
return res;
})
.catch((err) => console.log(err));
.catch((err) =>
setErrorAlert(`Could not start servers.`)
);
}}
>
Start All
@@ -147,15 +183,32 @@ const ServerDashboard = (props) => {
className="stop-all"
onClick={() => {
Promise.all(stopAll(user_data.map((e) => e.name)))
.then((res) => {
let failedServers = res.filter((e) => !e.ok);
if (failedServers.length > 0) {
setErrorAlert(
`Could not stop ${failedServers.length} ${
failedServers.length > 1 ? "servers" : "server"
}. ${
failedServers.length > 1 ? "Are they " : "Is it "
} already stopped?`
);
}
return res;
})
.then((res) => {
updateUsers(...slice)
.then((data) => {
dispatchPageUpdate(data, page);
})
.catch((err) => console.log(err));
.catch((err) =>
setErrorAlert(`Could not update users list.`)
);
return res;
})
.catch((err) => console.log(err));
.catch((err) =>
setErrorAlert(`Could not stop all servers.`)
);
}}
>
Stop All
@@ -187,12 +240,22 @@ const ServerDashboard = (props) => {
onClick={() =>
stopServer(e.name)
.then((res) => {
updateUsers(...slice).then((data) => {
if (res.ok) return res;
throw new Error(res.status);
})
.then((res) => {
updateUsers(...slice)
.then((data) => {
dispatchPageUpdate(data, page);
});
})
.catch((err) =>
setErrorAlert(`Could not update users list.`)
);
return res;
})
.catch((err) => console.log(err))
.catch((err) =>
setErrorAlert(`Could not stop server.`)
)
}
>
Stop Server
@@ -204,12 +267,22 @@ const ServerDashboard = (props) => {
onClick={() =>
startServer(e.name)
.then((res) => {
updateUsers(...slice).then((data) => {
if (res.ok) return res;
throw new Error(res.status);
})
.then((res) => {
updateUsers(...slice)
.then((data) => {
dispatchPageUpdate(data, page);
});
})
.catch((err) =>
setErrorAlert(`Could not update users list.`)
);
return res;
})
.catch((err) => console.log(err))
.catch((err) => {
setErrorAlert(`Could not start server.`);
})
}
>
Start Server

16
jsx/src/util/withAPI.js
View File

@@ -7,9 +7,10 @@ const withAPI = withProps(() => ({
data.json()
),
updateGroups: (offset, limit) =>
jhapiRequest(`/groups?offset=${offset}&limit=${limit}`, "GET").then(
(data) => data.json()
),
jhapiRequest(
`/groups?offset=${offset}&limit=${limit}`,
"GET"
).then((data) => data.json()),
shutdownHub: () => jhapiRequest("/shutdown", "POST"),
startServer: (name) => jhapiRequest("/users/" + name + "/server", "POST"),
stopServer: (name) => jhapiRequest("/users/" + name + "/server", "DELETE"),
@@ -36,13 +37,8 @@ const withAPI = withProps(() => ({
jhapiRequest("/users/" + username, "GET")
.then((data) => data.status)
.then((data) => (data > 200 ? false : true)),
failRegexEvent: () =>
alert(
"Cannot change username - either contains special characters or is too short."
),
noChangeEvent: () => {
returns;
},
failRegexEvent: () => {},
noChangeEvent: () => {},
refreshGroupsData: () =>
jhapiRequest("/groups", "GET").then((data) => data.json()),
refreshUserData: () =>

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

File diff suppressed because one or more lines are too long