Merge branch 'feat/admin-console': Administration page (Users + Server tabs)

2026-10-15 16:44:09 +07:00
parent b058179177 b6b40b0c1b
commit 5bc3f7d34a
20 changed files with 1333 additions and 22 deletions
@@ -0,0 +1,66 @@
+/**
+ * @file Administration.tsx
+ * @description The Administration page (`/admin`, a sidebar item; `/users`
+ * redirects here), server mode only and only for an admin or analyst: a tab
+ * shell like `History.tsx`, the active tab in `?tab=` — **Users** (the
+ * accounts, the account pool and the audit log, `Users.tsx`) and **Server**
+ * (the machine's hardware and each user's share of it, `ServerPanel`).
+ * Local mode and a developer are sent home, like the Users page always did.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import type { ComponentType } from "react";
+import { Navigate, useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Server, ShieldCheck, Users as UsersIcon } from "lucide-react";
+import { PageTabs } from "../components/PageTabs";
+import { useAuth } from "../components/AuthGate";
+import { ServerPanel } from "../components/admin/ServerPanel";
+import { Users } from "./Users";
+
+interface AdminTab {
+  id: string;
+  label: string;
+  Icon: ComponentType<{ className?: string }>;
+}
+
+export function Administration() {
+  const { t } = useTranslation("admin");
+  const auth = useAuth();
+  const [params, setParams] = useSearchParams();
+  const me = auth.state.mode === "server" ? auth.state.user : null;
+
+  if (!me || me.role === "developer") return <Navigate to="/" replace />;
+
+  const tabs: AdminTab[] = [
+    { id: "users", label: t("tabs.users"), Icon: UsersIcon },
+    { id: "server", label: t("tabs.server"), Icon: Server },
+  ];
+  const first = tabs[0]!;
+  const active = tabs.find((x) => x.id === params.get("tab")) ?? first;
+
+  return (
+    <div className="animate-fade-in space-y-6">
+      <div className="flex items-center gap-3">
+        <div className="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center">
+          <ShieldCheck className="w-4.5 h-4.5 text-accent" />
+        </div>
+        <div>
+          <h1 className="text-lg font-semibold text-fg-primary">{t("title")}</h1>
+          <p className="text-xs text-fg-muted">{t("description")}</p>
+        </div>
+      </div>
+      <PageTabs
+        ariaLabel={t("title")}
+        activeId={active.id}
+        onSelect={(id) => setParams(id === first.id ? {} : { tab: id }, { replace: true })}
+        tabs={tabs}
+      >
+        {active.id === "server" ? (
+          <ServerPanel isAdmin={me.role === "admin"} />
+        ) : (
+          <Users embedded />
+        )}
+      </PageTabs>
+    </div>
+  );
+}
@@ -1,6 +1,7 @@
 /**
 * @file Users.tsx
- * @description The Users page (`/users`, a sidebar item), server mode only and
+ * @description The Users tab of the Administration page (`/admin`, which
+ * `/users` redirects to — `Administration.tsx`), server mode only and
 * only for an admin or analyst (docs/SERVER-MODE.md): every account with its
 * role, state, workspaces, sessions, the tokens/$ it used in the last 7 and
 * 30 days (`GET /api/users`) and how much disk its home folder takes
@@ -9,9 +10,9 @@
 * an admin — add a user, and ONE Edit per row (`UserEditDialog`: profile,
 * role, active/disabled, password, owned workspaces, sign out everywhere, sent
 * as one change), and the Claude/Codex account pool every user's sessions run
- * on (`AccountPoolCard`), and (one Linux user per account) each member's own
- * tmux server beside the installed version, restartable by an admin
- * (`MemberTmuxCard`). Every change asks for the admin's OWN password again (the
+ * on (`AccountPoolCard`). (Each member's own tmux server — one Linux user per
+ * account — moved to the Server tab, `MemberTmuxCard` in `ServerPanel`.)
+ * Every change asks for the admin's OWN password again (the
 * server refuses without it); an analyst only reads. A row shows the display
 * name and email under the username when set; right-clicking a row offers
 * Edit, Open home (in /files), and copying the username or email.
@@ -51,7 +52,6 @@ import { ConfirmModal } from "../components/ConfirmModal";
 import { StatCard } from "../components/StatCard";
 import { ROLE_BADGE, UserEditDialog } from "../components/users/UserEditDialog";
 import { AccountPoolCard } from "../components/users/AccountPoolCard";
-import { MemberTmuxCard } from "../components/users/MemberTmuxCard";
 import { TableRowSkeleton } from "../components/Skeleton";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../components/ContextMenu";
 import { copyText } from "../lib/clipboard";
@@ -59,7 +59,7 @@ import { copyText } from "../lib/clipboard";
 type Role = AuthUser["role"];
 const ROLES: Role[] = ["admin", "analyst", "developer"];

-export function Users() {
+export function Users({ embedded = false }: { embedded?: boolean } = {}) {
  const { t } = useTranslation("users");
  const auth = useAuth();
  const me = auth.state.mode === "server" ? auth.state.user : null;
@@ -132,11 +132,16 @@ export function Users() {
    <div className="animate-fade-in space-y-6">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div className="flex items-center gap-3">
-          <div className="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center">
-            <UsersIcon className="w-4.5 h-4.5 text-accent" />
-          </div>
+          {!embedded && (
+            <div className="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center">
+              <UsersIcon className="w-4.5 h-4.5 text-accent" />
+            </div>
+          )}
          <div>
-            <h1 className="text-lg font-semibold text-fg-primary">{t("title")}</h1>
+            {/* Under Administration's tab bar the tab already names the page. */}
+            <h1 className={embedded ? "sr-only" : "text-lg font-semibold text-fg-primary"}>
+              {t("title")}
+            </h1>
            <p className="text-xs text-fg-muted">{t("description")}</p>
          </div>
        </div>
@@ -346,7 +351,6 @@ export function Users() {
        })()}

      <AccountPoolCard isAdmin={isAdmin} />
-      <MemberTmuxCard isAdmin={isAdmin} />

      <section className="card">
        <div className="flex items-center gap-2 px-5 py-4 border-b border-border">
@@ -0,0 +1,171 @@
+/**
+ * @file Administration.test.tsx
+ * @description The Administration page (`/admin`): local mode and a developer
+ * are sent home; staff land on the Users tab; the Server tab shows the
+ * machine's hardware, every disk, and each user's CPU/memory/home share from
+ * `GET /api/host`, with a user's busiest processes on click.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import type { AuthState, HostStats } from "../../lib/api";
+
+let authState: AuthState = { mode: "local" };
+vi.mock("../../components/AuthGate", () => ({
+  useAuth: () => ({ state: authState, logout: async () => {} }),
+}));
+
+const GB = 1024 ** 3;
+const stats: HostStats = {
+  at: "2026-10-15T00:00:00Z",
+  hostname: "box",
+  os: { platform: "linux", release: "7.0.0", distro: "Ubuntu 26.04", arch: "x64" },
+  uptime: 90000,
+  cpu: { model: "i5-7500", cores: 4, load: [1, 0.5, 0.25] },
+  memory: { total: 16 * GB, available: 8 * GB, used: 8 * GB, swapTotal: 4 * GB, swapUsed: 0 },
+  disks: [
+    {
+      device: "/dev/sdb2",
+      mount: "/",
+      type: "ext4",
+      kind: "SSD",
+      total: 200 * GB,
+      used: 50 * GB,
+      free: 150 * GB,
+    },
+    {
+      device: "/dev/sda1",
+      mount: "/data",
+      type: "ext4",
+      kind: "HDD",
+      total: 500 * GB,
+      used: 0,
+      free: 500 * GB,
+    },
+  ],
+  homesMount: "/",
+  gpus: [],
+  usage: {
+    cpu: 40,
+    sampleMs: 1000,
+    groups: [
+      {
+        key: "user:2",
+        kind: "user",
+        userId: 2,
+        username: "mia",
+        cpu: 25,
+        memory: 2 * GB,
+        memoryPercent: 12.5,
+        processes: 3,
+        top: [{ pid: 77, name: "claude", cpu: 20, memory: GB }],
+      },
+      { key: "host", kind: "host", cpu: 5, memory: GB, memoryPercent: 6.3, processes: 90, top: [] },
+    ],
+  },
+};
+
+const api = vi.hoisted(() => ({
+  host: { stats: vi.fn() },
+  users: {
+    list: vi.fn(),
+    audit: vi.fn(),
+    storage: vi.fn(),
+    tmux: vi.fn(async () => ({ available: false, users: [] })),
+    avatarUrl: () => null,
+  },
+}));
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: {
+      ...api,
+      lanes: { list: vi.fn(async () => ({ lanes: [], counts: {} })) },
+      accountPool: { list: vi.fn(async () => ({ accounts: [], codex: [], blockPercent: 90 })) },
+    },
+  };
+});
+
+import { Administration } from "../Administration";
+
+const renderAt = (url: string) =>
+  render(
+    <MemoryRouter initialEntries={[url]}>
+      <Routes>
+        <Route path="/admin" element={<Administration />} />
+        <Route path="/" element={<div data-testid="home" />} />
+      </Routes>
+    </MemoryRouter>
+  );
+
+beforeEach(() => {
+  api.host.stats.mockResolvedValue(stats);
+  api.users.list.mockResolvedValue({
+    users: [
+      {
+        id: 1,
+        username: "boss",
+        role: "admin",
+        disabled: false,
+        workspaces: 0,
+        sessions: 0,
+        last7d: { cost: 0, tokens: 0 },
+        last30d: { cost: 0, tokens: 0 },
+      },
+      {
+        id: 2,
+        username: "mia",
+        role: "developer",
+        displayName: "Mia",
+        disabled: false,
+        workspaces: 1,
+        sessions: 2,
+        last7d: { cost: 0, tokens: 0 },
+        last30d: { cost: 0, tokens: 0 },
+      },
+    ],
+  });
+  api.users.audit.mockResolvedValue({ entries: [] });
+  api.users.storage.mockResolvedValue({
+    storage: { 2: { bytes: 20 * GB, files: 10, partial: false, measuredAt: "x" } },
+    measuring: false,
+  });
+});
+
+describe("Administration", () => {
+  it("sends local mode and a developer home", async () => {
+    authState = { mode: "local" };
+    renderAt("/admin");
+    expect(await screen.findByTestId("home")).toBeTruthy();
+    authState = { mode: "server", user: { id: 2, username: "mia", role: "developer" } };
+    renderAt("/admin");
+    expect((await screen.findAllByTestId("home")).length).toBeGreaterThan(0);
+  });
+
+  it("opens on the Users tab", async () => {
+    authState = { mode: "server", user: { id: 1, username: "boss", role: "admin" } };
+    renderAt("/admin");
+    expect(await screen.findByTestId("users-table")).toBeTruthy();
+    expect(screen.getByRole("tab", { name: /users/i }).getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("shows hardware and each user's share on the Server tab", async () => {
+    authState = { mode: "server", user: { id: 1, username: "boss", role: "admin" } };
+    renderAt("/admin?tab=server");
+    const table = await screen.findByTestId("server-usage-table");
+    expect(await screen.findByText("box")).toBeTruthy();
+    expect(screen.getByTestId("server-disks-table").textContent).toContain("HDD");
+    const mia = await within(table).findByText("Mia");
+    const row = mia.closest("tr")!;
+    expect(row.textContent).toContain("25%");
+    expect(row.textContent).toContain("(13%)");
+    // 20 GB home on the 200 GB homes disk.
+    expect(row.textContent).toContain("10%");
+    expect(within(table).queryByText("claude")).toBeNull();
+    fireEvent.click(mia.closest("button")!);
+    expect(within(table).getByText("claude")).toBeTruthy();
+  });
+});