admin: move active-servers filter to top

next to name filter, so it's not in the table headings

merges Running & Actions columns,
since it's really just Actions now (server actions & user actions)

jsx/src/components/ServerDashboard/ServerDashboard.jsx

@@ -110,14 +110,18 @@ const ServerDashboard = (props) => {
     });
   };
 
-  const setStateFilter = (state_filter) => {
+  const setStateFilter = (new_state_filter) => {
     // persist ?state filter
     // store in url param, clear when value is default ('')
     setSearchParams((params) => {
-      if (!state_filter) {
+      // clear offset when filter changes
+      if (new_state_filter !== state_filter) {
+        params.delete("offset");
+      }
+      if (!new_state_filter) {
         params.delete("state");
       } else {
-        params.set("state", state_filter);
+        params.set("state", new_state_filter);
       }
       return params;
     });
@@ -196,7 +200,7 @@ const ServerDashboard = (props) => {
     });
   };
   const DeleteServerButton = ({ server, user }) => {
-    if (server.name === "") {
+    if (!server.name) {
       // It's not possible to delete unnamed servers
       return null;
     }
@@ -251,12 +255,10 @@ const ServerDashboard = (props) => {
     );
   };
 
-  const EditUserCell = ({ user }) => {
+  const EditUserButton = ({ user }) => {
     return (
-      <td>
       <button
-          className="btn btn-primary btn-xs"
+        className="btn btn-light btn-xs"
-          style={{ marginRight: 20 }}
         onClick={() =>
           history.push({
             pathname: "/edit-user",
@@ -269,7 +271,6 @@ const ServerDashboard = (props) => {
       >
         Edit User
       </button>
-      </td>
     );
   };
 
@@ -363,8 +364,8 @@ const ServerDashboard = (props) => {
           <DeleteServerButton server={server} user={user} />
           <AccessServerButton server={server} />
           <SpawnPageButton server={server} user={user} />
+          <EditUserButton user={user} />
         </td>
-        <EditUserCell user={user} />
       </tr>,
       <tr key={`${userServerName}-detail`}>
         <td
@@ -432,6 +433,24 @@ const ServerDashboard = (props) => {
               onChange={handleSearch}
             />
           </Col>
+          <Col md={3}>
+            {/* div.checkbox required for BS3 CSS */}
+            <div class="checkbox">
+              <label title="check to only show running servers, otherwise show all">
+                <Form.Check
+                  inline
+                  type="checkbox"
+                  name="active_servers"
+                  id="active-servers-filter"
+                  checked={state_filter == "active"}
+                  onChange={(event) => {
+                    setStateFilter(event.target.checked ? "active" : null);
+                  }}
+                />
+                {"only active servers"}
+              </label>
+            </div>
+          </Col>
 
           <Col md="auto" style={{ float: "right", margin: 15 }}>
             <Link to="/groups">{"> Manage Groups"}</Link>
@@ -460,23 +479,6 @@ const ServerDashboard = (props) => {
                   testid="last-activity-sort"
                 />
               </th>
-              <th id="running-status-header">
-                <label title="only show active servers">
-                  <Form.Check
-                    inline
-                    type="checkbox"
-                    name="active_servers"
-                    aria-label="only show active servers"
-                    checked={state_filter == "active"}
-                    onChange={(event) => {
-                      setStateFilter(event.target.checked ? "active" : null);
-                    }}
-                  />
-                  {state_filter == "active"
-                    ? " Active servers"
-                    : " All servers"}
-                </label>
-              </th>
               <th id="actions-header">Actions</th>
             </tr>
           </thead>
@@ -489,14 +491,13 @@ const ServerDashboard = (props) => {
                   </Button>
                 </Link>
               </td>
-              <td></td>
+              <td colspan="4" className="admin-header-buttons">
-              <td></td>
-              <td>
                 {/* Start all servers */}
                 <Button
                   variant="primary"
                   className="start-all"
                   data-testid="start-all"
+                  title="start all servers on the current page"
                   onClick={() => {
                     Promise.all(startAll(user_data.map((e) => e.name)))
                       .then((res) => {
@@ -533,6 +534,7 @@ const ServerDashboard = (props) => {
                   variant="danger"
                   className="stop-all"
                   data-testid="stop-all"
+                  title="stop all servers on the current page"
                   onClick={() => {
                     Promise.all(stopAll(user_data.map((e) => e.name)))
                       .then((res) => {
@@ -563,8 +565,8 @@ const ServerDashboard = (props) => {
                 >
                   Stop All
                 </Button>
-              </td>
+                {/* spacing between start/stop and Shutdown */}
-              <td>
+                <span style={{ "margin-left": "56px" }}> </span>
                 {/* Shutdown Jupyterhub */}
                 <Button
                   variant="danger"
@@ -574,7 +576,6 @@ const ServerDashboard = (props) => {
                   Shutdown Hub
                 </Button>
               </td>
-              <td></td>
             </tr>
             {servers.flatMap(([user, server]) => serverRow(user, server))}
           </tbody>

jsx/src/components/ServerDashboard/server-dashboard.css

@@ -7,6 +7,13 @@
   margin-left: auto;
 }
 
+.btn-light {
+  /* backport bs5 btn-light colors */
+  background-color: #f9fafb;
+  border-color: #f9fafb;
+  color: #000;
+}
+
 .server-dashboard-container .btn-light {
   border: 1px solid #ddd;
 }
@@ -47,11 +54,9 @@ tr.noborder > td {
   margin-right: 5px;
 }
 
-.form-check-inline {
+.admin-header-buttons {
-  /* inline form check doesn't get inline css 
+  /* float header action buttons to the right */
-  I _think_ this is because our bootstrap css is outdated
+  text-align: right;
-  */
-  display: inline-block;
 }
 
 /* column widths for dashboard
@@ -66,31 +71,21 @@ goals:
 
 */
 
-.admin-table-head label {
-  /* clear margin-bottom to keep label on baseline */
-  margin-bottom: 0px;
-}
-
 .admin-table-head #user-header {
 }
 .admin-table-head #admin-header {
   width: 64px;
 }
-.admin-table-head #server-header {
-}
 .admin-table-head #last-activity-header {
-  width: 180px;
+  min-width: 180px;
-}
-.admin-table-head #running-status-header {
-  width: 300px;
 }
 .admin-table-head #actions-header {
-  width: 80px;
+  width: 350px;
 }
 
 /* vertical stack server buttons on small windows */
 @media (max-width: 991px) {
-  .admin-table-head #running-status-header {
+  .admin-table-head #actions-header {
     width: 140px;
   }
 }