Open Administration on a dashboard of what the role can read
Administration used to open on its first section. It opens on a grid of cards now: users, domains, messages waiting in the delivery queue, server memory, and the last 24 hours' received and sent. Each card is there only when the role holds what its number needs -- a count is a query, the metric history a query and a get -- so a helpdesk role that reads accounts and domains sees those two cards and nothing about the server. What the cards count is whatever Stalwart answers for the signed-in account, which scopes a tenant administrator's accounts, domains and queue to the tenancy. The metric history has no tenant in it, and Stalwart's Tenant Administrator role does not hold it, so a tenant's dashboard is users, domains and pending. The history is Enterprise-only and switched off by default. A server that refuses it leaves those cards off; one that records nothing says so rather than showing zeroes. Received and sent add up the queue counters Stalwart's own dashboard uses, filtered with the comparison names the live server accepts (a bare timestamp is unsupportedFilter). The column count follows the number of cards so rows stay even, and falls back by the grid's own width rather than the window's. The server's test for whether an account is offered Administration matches the client's again, now that a count is enough. The mock answers the queue and an hourly history ending in the current hour; MOCK_METRICS=off refuses the history as Community does, a tenant administrator gets the queue, and helpdesk reads domains, as the demo's does. ROADMAP and FEATURES said reporting and queues were out of scope; they say the dashboard reads a handful of numbers and that managing queues, logs and settings stays out. KNOWN-ISSUES records what was settled on the live server and what was only read from source. Fourteen new strings, in all nine catalogues.
This commit is contained in:
@@ -0,0 +1,134 @@
|
||||
import { useEffect, useState, type ReactNode } from "react";
|
||||
import { Link } from "wouter";
|
||||
import { ArrowDownToLine, ArrowUpFromLine, Globe, Hourglass, LayoutDashboard, MemoryStick, RefreshCw, Users } from "lucide-react";
|
||||
import { adminSections, dashboardCards, type DashboardCard } from "@/lib/adminAccess";
|
||||
import { balancedColumns, countObjects, DASHBOARD_WINDOW_MS, isRefused, loadMetrics, summariseMetrics, type MessageStats } from "@/lib/adminDashboard";
|
||||
import { formatDayMonthTime, resolvedLocale } from "@/lib/datetime";
|
||||
import { formatSize } from "@/lib/format";
|
||||
import { t } from "@/lib/i18n";
|
||||
import { Empty } from "@/ui/misc";
|
||||
import { usePermissions } from "./usePermissions";
|
||||
|
||||
/** Loading, a number, refused by the server (the card goes), or failed (the card says so). */
|
||||
type Loaded<T> = { state: "loading" } | { state: "ok"; value: T } | { state: "refused" } | { state: "error" };
|
||||
|
||||
const LOADING = { state: "loading" } as const;
|
||||
|
||||
async function settle<T>(work: Promise<T>): Promise<Loaded<T>> {
|
||||
try {
|
||||
return { state: "ok", value: await work };
|
||||
} catch (err) {
|
||||
return isRefused(err) ? { state: "refused" } : { state: "error" };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Administration's landing page: a card for each number the role may read.
|
||||
*
|
||||
* Which cards appear is `dashboardCards`, from the permissions Stalwart
|
||||
* reported; what they count is whatever Stalwart answers for this account,
|
||||
* which for a tenant administrator is their tenancy. A card whose feed the
|
||||
* server refuses anyway -- the metric history on a Community server -- is left
|
||||
* off rather than shown broken, and one that could not be loaded says so.
|
||||
*/
|
||||
export function AdminDashboard() {
|
||||
const perms = usePermissions();
|
||||
const cards = dashboardCards(perms);
|
||||
const sections = adminSections(perms);
|
||||
const [reload, setReload] = useState(0);
|
||||
const [users, setUsers] = useState<Loaded<number>>(LOADING);
|
||||
const [domains, setDomains] = useState<Loaded<number>>(LOADING);
|
||||
const [pending, setPending] = useState<Loaded<number>>(LOADING);
|
||||
const [messages, setMessages] = useState<Loaded<MessageStats>>(LOADING);
|
||||
const key = cards.join(",");
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const into = <T,>(set: (v: Loaded<T>) => void, work: () => Promise<T>) => {
|
||||
set(LOADING);
|
||||
void settle(work()).then((v) => !cancelled && set(v));
|
||||
};
|
||||
if (cards.includes("users")) into(setUsers, () => countObjects("Account"));
|
||||
if (cards.includes("domains")) into(setDomains, () => countObjects("Domain"));
|
||||
if (cards.includes("pending")) into(setPending, () => countObjects("QueuedMessage"));
|
||||
if (cards.includes("received")) into(setMessages, async () => summariseMetrics(await loadMetrics(new Date(Date.now() - DASHBOARD_WINDOW_MS))));
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
// `key` is the card list's contents; the array itself is new every render.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [key, reload]);
|
||||
|
||||
const number = new Intl.NumberFormat(resolvedLocale());
|
||||
const count = (v: Loaded<number>) => (v.state === "ok" ? number.format(v.value) : undefined);
|
||||
const stats = messages.state === "ok" ? messages.value : null;
|
||||
const unrecorded = stats !== null && !stats.recorded;
|
||||
|
||||
const every: Array<{ id: DashboardCard; loaded: Loaded<unknown>; node: ReactNode }> = [
|
||||
{ id: "users", loaded: users, node: <Card icon={<Users size={20} />} label={t("Users")} value={count(users)} caption={t("User accounts")} loaded={users} href={sections.includes("accounts") ? "/admin/accounts" : undefined} /> },
|
||||
{ id: "domains", loaded: domains, node: <Card icon={<Globe size={20} />} label={t("Domains")} value={count(domains)} caption={t("Mail domains")} loaded={domains} href={sections.includes("domains") ? "/admin/domains" : undefined} /> },
|
||||
{ id: "pending", loaded: pending, node: <Card icon={<Hourglass size={20} />} label={t("Pending")} value={count(pending)} caption={t("Waiting in the delivery queue")} loaded={pending} /> },
|
||||
{
|
||||
id: "memory",
|
||||
loaded: messages,
|
||||
node: (
|
||||
<Card
|
||||
icon={<MemoryStick size={20} />}
|
||||
label={t("Server memory")}
|
||||
value={stats?.memory ? formatSize(stats.memory.bytes) : undefined}
|
||||
caption={stats?.memory ? t("As of {time}", { time: formatDayMonthTime(new Date(stats.memory.at)) }) : unrecorded ? t("Not recorded on this server") : t("Last 24 hours")}
|
||||
loaded={messages}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ id: "received", loaded: messages, node: <Card icon={<ArrowDownToLine size={20} />} label={t("Received")} value={stats?.recorded ? number.format(stats.received) : undefined} caption={unrecorded ? t("Not recorded on this server") : t("Last 24 hours")} loaded={messages} /> },
|
||||
{ id: "sent", loaded: messages, node: <Card icon={<ArrowUpFromLine size={20} />} label={t("Sent")} value={stats?.recorded ? number.format(stats.sent) : undefined} caption={unrecorded ? t("Not recorded on this server") : t("Last 24 hours")} loaded={messages} /> },
|
||||
];
|
||||
const shown = every.filter((c) => cards.includes(c.id) && c.loaded.state !== "refused");
|
||||
const columns = balancedColumns(shown.length);
|
||||
|
||||
return (
|
||||
// The column counts are set here rather than on the grid, so the heading --
|
||||
// and its Refresh button -- end where the cards do.
|
||||
<div className="admin-dashboard" style={{ "--cols-wide": columns.wide, "--cols-mid": columns.mid } as React.CSSProperties}>
|
||||
<div className="admin-head">
|
||||
<div className="grow">
|
||||
<h1>{t("Dashboard")}</h1>
|
||||
<p className="lead">{t("The numbers your role can see, as the server reports them.")}</p>
|
||||
</div>
|
||||
<button className="icon-btn" aria-label={t("Refresh")} title={t("Refresh")} onClick={() => setReload((n) => n + 1)}>
|
||||
<RefreshCw size={18} />
|
||||
</button>
|
||||
</div>
|
||||
{shown.length ? (
|
||||
<div className="admin-cards-wrap">
|
||||
<div className="admin-cards">
|
||||
{shown.map((c) => <div key={c.id}>{c.node}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Empty icon={<LayoutDashboard size={32} />} title={t("Nothing to show")} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Card({ icon, label, value, caption, loaded, href }: { icon: ReactNode; label: string; value: string | undefined; caption: string; loaded: Loaded<unknown>; href?: string }) {
|
||||
const body = (
|
||||
<>
|
||||
<div className="admin-card-top">
|
||||
<span className="admin-card-icon" aria-hidden="true">{icon}</span>
|
||||
<span className="admin-card-label">{label}</span>
|
||||
</div>
|
||||
<div className="admin-card-value" aria-busy={loaded.state === "loading"}>
|
||||
{loaded.state === "loading" ? <span className="admin-card-placeholder" /> : (value ?? "—")}
|
||||
</div>
|
||||
<div className="hint">{loaded.state === "error" ? t("Could not be loaded") : caption}</div>
|
||||
</>
|
||||
);
|
||||
return href ? (
|
||||
<Link href={href} className="admin-card link">{body}</Link>
|
||||
) : (
|
||||
<div className="admin-card">{body}</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user