Add create group / delete group functionality

jsx/.eslintrc.json

@@ -0,0 +1,41 @@
+{
+    "extends": [
+        "plugin:react/recommended"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "plugins": [
+        "eslint-plugin-react",
+        "prettier"
+    ],
+    "env": {
+        "es6": true,
+        "browser": true
+    },
+    "rules": {
+        "semi": "off",
+        "quotes": "off",
+        "prettier/prettier": "warn"
+    },
+    "overrides": [
+        {
+            "files": [
+                "**/*.test.js",
+                "**/*.test.jsx"
+            ],
+            "env": {
+                "jest": true
+            }
+        }
+    ]
+}

jsx/src/App.jsx

@@ -11,6 +11,7 @@ import { createBrowserHistory } from "history";
 import ServerDashboard from "./components/ServerDashboard/ServerDashboard";
 import Groups from "./components/Groups/Groups";
 import GroupEdit from "./components/GroupEdit/GroupEdit";
+import CreateGroup from "./components/CreateGroup/CreateGroup"
 import AddUser from "./components/AddUser/AddUser";
 import EditUser from "./components/EditUser/EditUser";
 
@@ -41,6 +42,7 @@ class App extends Component {
               <Route exact path="/" component={ServerDashboard} />
               <Route exact path="/groups" component={Groups} />
               <Route exact path="/group-edit" component={GroupEdit} />
+              <Route exact path="/create-group" component={CreateGroup} />
               <Route exact path="/add-users" component={AddUser} />
               <Route exact path="/edit-user" component={EditUser} />
             </Switch>

jsx/src/components/CreateGroup/CreateGroup.js

@@ -0,0 +1,20 @@
+import { connect } from "react-redux";
+import { compose, withProps } from "recompose";
+import { jhapiRequest } from "../../util/jhapiUtil";
+import { CreateGroup } from "./CreateGroup.pre";
+
+const withUserAPI = withProps((props) => ({
+  createGroup: (groupName) => jhapiRequest("/groups/" + groupName, "POST"),
+  failRegexEvent: () =>
+    alert(
+      "Removed " +
+        JSON.stringify(removed_users) +
+        " for either containing special characters or being too short."
+    ),
+  refreshGroupsData: () =>
+    jhapiRequest("/groups", "GET")
+      .then((data) => data.json())
+      .then((data) => props.dispatch({ type: "GROUPS_DATA", value: data })),
+}));
+
+export default compose(connect(), withUserAPI)(CreateGroup);

jsx/src/components/CreateGroup/CreateGroup.pre.jsx

@@ -0,0 +1,77 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import Multiselect from "../Multiselect/Multiselect";
+
+export class CreateGroup extends Component {
+  static get propTypes() {
+    return {
+      createGroup: PropTypes.func,
+      refreshGroupsData: PropTypes.func,
+      failRegexEvent: PropTypes.func,
+      history: PropTypes.shape({
+        push: PropTypes.func,
+      }),
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      groupName: "",
+    };
+  }
+
+  render() {
+    var { createGroup, refreshGroupsData } = this.props;
+
+    return (
+      <>
+        <div className="container">
+          <div className="row">
+            <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+              <div className="panel panel-default">
+                <div className="panel-heading">
+                  <h4>Create Group</h4>
+                </div>
+                <div className="panel-body">
+                  <div className="input-group">
+                    <input
+                      className="group-name-input"
+                      type="text"
+                      value={this.state.groupName}
+                      id="group-name"
+                      placeholder="group name..."
+                      onChange={(e) => {
+                        this.setState({ groupName: e.target.value });
+                      }}
+                    ></input>
+                  </div>
+                </div>
+                <div className="panel-footer">
+                  <button id="return" className="btn btn-light">
+                    <Link to="/">Back</Link>
+                  </button>
+                  <span> </span>
+                  <button
+                    id="submit"
+                    className="btn btn-primary"
+                    onClick={() => {
+                      let groupName = this.state.groupName;
+                      createGroup(groupName)
+                        .then(refreshGroupsData())
+                        .then(this.props.history.push("/groups"))
+                        .catch((err) => console.log(err));
+                    }}
+                  >
+                    Add Users
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+}

jsx/src/components/GroupEdit/GroupEdit.js

@@ -8,6 +8,12 @@ const withGroupsAPI = withProps((props) => ({
     jhapiRequest("/groups/" + groupname + "/users", "POST", { users }),
   removeFromGroup: (users, groupname) =>
     jhapiRequest("/groups/" + groupname + "/users", "DELETE", { users }),
+  deleteGroup: (name) => 
+    jhapiRequest("/groups/" + name, "DELETE"),
+  refreshGroupsData: () =>
+    jhapiRequest("/groups", "GET")
+      .then((data) => data.json())
+      .then((data) => props.dispatch({ type: "GROUPS_DATA", value: data })),
 }));
 
 export default compose(connect(), withGroupsAPI)(GroupEdit);

jsx/src/components/GroupEdit/GroupEdit.pre.jsx

@@ -18,6 +18,7 @@ export class GroupEdit extends Component {
       }),
       addToGroup: PropTypes.func,
       removeFromGroup: PropTypes.func,
+      deleteGroup: PropTypes.func
     };
   }
 
@@ -39,7 +40,7 @@ export class GroupEdit extends Component {
 
     var { group_data, user_data, callback } = this.props.location.state;
 
-    var { addToGroup, removeFromGroup } = this.props;
+    var { addToGroup, removeFromGroup, deleteGroup, refreshGroupsData } = this.props;
 
     if (!(group_data && user_data)) return <div></div>;
 
@@ -103,6 +104,13 @@ export class GroupEdit extends Component {
             >
               Apply
             </button>
+            <button className="btn btn-danger" style={{ float: "right" }} onClick={() => {
+              var groupName = group_data.name
+              deleteGroup(groupName)
+                .then(refreshGroupsData())
+                .then(this.props.history.push("/groups"))
+                .catch(err => console.log(err))
+            }}>Delete Group</button>
             <br></br>
             <br></br>
           </div>

jsx/src/components/Groups/Groups.js

@@ -21,7 +21,7 @@ const withGroupsAPI = withProps((props) => ({
     jhapiRequest("/groups/" + name + "/users", "DELETE", {
       body: { users: removed_users },
       json: true,
-    }),
+    })
 }));
 
 export default compose(

jsx/src/components/Groups/Groups.pre.jsx

@@ -37,7 +37,8 @@ export class Groups extends Component {
                 <h4>Groups</h4>
               </div>
               <div className="panel-body">
-                {groups_data.map((e, i) => (
+                {groups_data.length > 0 ? (
+                  groups_data.map((e, i) => (
                     <div key={"group-edit" + i} className="group-edit-link">
                       <h4>
                         <Link
@@ -57,12 +58,22 @@ export class Groups extends Component {
                         </Link>
                       </h4>
                     </div>
-                ))}
+                  ))
+                ) : (
+                  <div>
+                    <h4>no groups created...</h4>
+                  </div>
+                )}
               </div>
               <div className="panel-footer">
-                <div className="btn btn-light">
+                <button className="btn btn-light adjacent-span-spacing">
                   <Link to="/">Back</Link>
-                </div>
+                </button>
+                <button className="btn btn-primary adjacent-span-spacing" onClick={() => {
+                  this.props.history.push("/create-group")
+                }}>
+                  New Group
+                </button>
               </div>
             </div>
           </div>

jsx/src/style/root.css

@@ -27,3 +27,9 @@
     visibility: visible;
     z-index: 2000
 }
+
+/* Global Util Classes */
+.adjacent-span-spacing {
+    margin-right: 5px;
+    margin-left: 5px;
+}

jupyterhub-proxy.pid

@@ -1 +1 @@
-9472
+12467

jupyterhub/handlers/pages.py

@@ -454,18 +454,85 @@ class SpawnPendingHandler(BaseHandler):
 class AdminHandler(BaseHandler):
     """Render the admin page."""
 
-    @web.authenticated
-    @admin_only
     async def get(self):
+        pagination = Pagination(url=self.request.uri, config=self.config)
+        page, per_page, offset = pagination.get_page_args(self)
+
+        print(page, per_page, offset)
+
+        available = {'name', 'admin', 'running', 'last_activity'}
+        default_sort = ['admin', 'name']
+        mapping = {'running': orm.Spawner.server_id}
+        for name in available:
+            if name not in mapping:
+                table = orm.User if name != "last_activity" else orm.Spawner
+                mapping[name] = getattr(table, name)
+
+        default_order = {
+            'name': 'asc',
+            'last_activity': 'desc',
+            'admin': 'desc',
+            'running': 'desc',
+        }
+
+        sorts = self.get_arguments('sort') or default_sort
+        orders = self.get_arguments('order')
+
+        for bad in set(sorts).difference(available):
+            self.log.warning("ignoring invalid sort: %r", bad)
+            sorts.remove(bad)
+        for bad in set(orders).difference({'asc', 'desc'}):
+            self.log.warning("ignoring invalid order: %r", bad)
+            orders.remove(bad)
+
+        # add default sort as secondary
+        for s in default_sort:
+            if s not in sorts:
+                sorts.append(s)
+        if len(orders) < len(sorts):
+            for col in sorts[len(orders) :]:
+                orders.append(default_order[col])
+        else:
+            orders = orders[: len(sorts)]
+
+        # this could be one incomprehensible nested list comprehension
+        # get User columns
+        cols = [mapping[c] for c in sorts]
+        # get User.col.desc() order objects
+        ordered = [getattr(c, o)() for c, o in zip(cols, orders)]
+
+        query = self.db.query(orm.User).outerjoin(orm.Spawner).distinct(orm.User.id)
+        subquery = query.subquery("users")
+        users = (
+            self.db.query(orm.User)
+            .select_entity_from(subquery)
+            .outerjoin(orm.Spawner)
+            .order_by(*ordered)
+            .limit(per_page)
+            .offset(offset)
+        )
+
+        users = [self._user_from_orm(u) for u in users]
+
+        running = []
+        for u in users:
+            running.extend(s for s in u.spawners.values() if s.active)
+
+        pagination.total = query.count()
+
         auth_state = await self.current_user.get_auth_state()
         html = await self.render_template(
             'admin.html',
             current_user=self.current_user,
             auth_state=auth_state,
             admin_access=self.settings.get('admin_access', False),
+            users=users,
+            running=running,
+            sort={s: o for s, o in zip(sorts, orders)},
             allow_named_servers=self.allow_named_servers,
             named_server_limit_per_user=self.named_server_limit_per_user,
             server_version='{} {}'.format(__version__, self.version_hash),
+            pagination=pagination,
         )
         self.finish(html)