63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import * as stylex from "@stylexjs/stylex";
|
|
import { useAuthority } from "@/features/configuration/authority";
|
|
import { colors } from "@/ui/tokens.stylex";
|
|
|
|
const styles = stylex.create({
|
|
notice: {
|
|
borderBottomWidth: 1,
|
|
borderBottomStyle: "solid",
|
|
borderBottomColor: colors.warnBorder,
|
|
backgroundColor: colors.warnSurface,
|
|
color: colors.warnText,
|
|
paddingInline: "1rem",
|
|
paddingBlock: "0.5rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
},
|
|
unavailable: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.5rem",
|
|
borderBottomWidth: 1,
|
|
borderBottomStyle: "solid",
|
|
borderBottomColor: colors.border,
|
|
backgroundColor: colors.surfaceHover,
|
|
color: colors.textSecondary,
|
|
paddingInline: "1rem",
|
|
paddingBlock: "0.25rem",
|
|
fontSize: "0.75rem",
|
|
lineHeight: "1rem",
|
|
},
|
|
});
|
|
|
|
/**
|
|
* What `/api/config/status` says, on every route.
|
|
*
|
|
* The restart notice has no dismiss control on purpose: `restart_pending` is
|
|
* process state the server owns, so a reload cannot clear it and neither
|
|
* should a click. It goes away when the process it describes does.
|
|
*
|
|
* The unavailable indicator is the other half. A dead status endpoint would
|
|
* otherwise hide both file authority and a pending restart from every page
|
|
* outside configuration, and silence would read as "nothing to report".
|
|
*/
|
|
export default function ConfigStatusNotices() {
|
|
const authority = useAuthority();
|
|
|
|
if (authority.state === "failed") {
|
|
return (
|
|
<div role="status" {...stylex.props(styles.unavailable)}>
|
|
Configuration status unavailable — file authority and pending restarts cannot be shown.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (authority.state !== "resolved" || !authority.status.restart_pending) return null;
|
|
|
|
return (
|
|
<div role="status" {...stylex.props(styles.notice)}>
|
|
Saved changes are not running yet. Restart nxdns to apply them.
|
|
</div>
|
|
);
|
|
}
|