nntrivi2001
b6b40b0c1b
/users becomes /admin (redirected), a tab shell over the existing Users view and a new Server tab backed by GET /api/host (server/lib/host-stats.js): hostname/OS/uptime, CPU and load, memory and swap, every real disk with HDD/SSD, NVIDIA GPUs, and each user's live share from two /proc samples — attributed by the member's Linux uid (S3) or, for host processes, by the inherited AGENTHUB_LANE_ID's workspace owner. Read-only, staff-only (/host in STAFF_ONLY_PREFIXES), comm names only. Members' tmux card moves to the Server tab.
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
/**
|
|
* @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>
|
|
);
|
|
}
|