mokhtar
c65d92d8f8
the client address follows its name as visible muted text in the query tables, the config lock indicator prints its reason beside the tag except in table rows where a page-level note explains the lock instead, and the locked delete buttons describe themselves through that one visible note. the chart legend tooltip is deleted because a named client is deliberately not addressed in the chart, and the dead series address field went with it. titles that merely repeat visible copyable text stay.
74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
/**
|
|
* The client column of the query tables reads as a name wherever one is known,
|
|
* with the same precedence the Clients page applies: a hand-typed `name` wins,
|
|
* the reverse-DNS `learned_name` stands in muted behind it, and an address with
|
|
* neither — including one the loaded list has never seen — stays bare.
|
|
*
|
|
* The muted colour is the whole of the affordance here. The Clients page pairs
|
|
* it with an outlined "learned" tag, and keeps it: one mention per client is
|
|
* information. Repeating that tag down every row of a query table is noise, so
|
|
* the tables carry the name alone.
|
|
*/
|
|
|
|
import { useMemo } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import { clientsQuery } from "@/lib/queries";
|
|
import type { Client } from "@/lib/types";
|
|
import { styles as shared } from "@/ui/styles";
|
|
import { colors } from "@/ui/tokens.stylex";
|
|
|
|
const styles = stylex.create({
|
|
/** Secondary to the name it qualifies, and never the only thing in the cell. */
|
|
address: {
|
|
color: colors.textMuted,
|
|
},
|
|
});
|
|
|
|
export type ClientNames = ReadonlyMap<string, Pick<Client, "name" | "learned_name">>;
|
|
|
|
/**
|
|
* The live stream names clients the loaded list has never seen. Polling folds
|
|
* them in on the next tick, which keeps the lookup a single cached query
|
|
* instead of a fetch fired per unknown address.
|
|
*/
|
|
const CLIENTS_POLL_MS = 30_000;
|
|
|
|
export function useClientNames(): ClientNames {
|
|
const { data } = useQuery({ ...clientsQuery(), refetchInterval: CLIENTS_POLL_MS });
|
|
return useMemo(
|
|
() =>
|
|
new Map(
|
|
(data ?? []).map((client) => [client.ip, { name: client.name, learned_name: client.learned_name }]),
|
|
),
|
|
[data],
|
|
);
|
|
}
|
|
|
|
/**
|
|
* The name the loaded list gives this address right now, or null when it gives
|
|
* none. Callers that must distinguish "named" from "bare address" — rather than
|
|
* just render whichever applies — read this instead of re-deriving precedence.
|
|
*/
|
|
export function clientLabel(ip: string, names: ClientNames): { text: string; learned: boolean } | null {
|
|
const client = names.get(ip);
|
|
if (client === undefined) return null;
|
|
if (client.name !== "") return { text: client.name, learned: false };
|
|
if (client.learned_name !== "") return { text: client.learned_name, learned: true };
|
|
return null;
|
|
}
|
|
|
|
export function ClientName({ ip, names }: { ip: string; names: ClientNames }) {
|
|
const label = clientLabel(ip, names);
|
|
if (label === null) return <span {...stylex.props(shared.mono)}>{ip}</span>;
|
|
// The name replaces the address, so the address follows it as real text that
|
|
// anyone can read and copy. A `title` carried it before, which reaches
|
|
// neither a keyboard nor a touch screen.
|
|
return (
|
|
<span {...stylex.props(label.learned && shared.learnedName)}>
|
|
{label.text}
|
|
<span {...stylex.props(styles.address)}> ({ip})</span>
|
|
</span>
|
|
);
|
|
}
|