pastilhas
95b84ea748
Offscale was the first plugin extracted and it was done before we knew what "extracted" meant. Music, done last, is the standard. This brings offscale to it. ── The rebrand ── The plugin was `offscale` to the platform and `headscale` to itself: sidecar name and handles, the port announcement, the API proxy name, the React components, every hook, the react-query keys, the panel ids and appTypes, and the Postgres table. Now all of those say offscale. The line drawn, and it is deliberate: OffScale is Officer's tooling layer, and Headscale is the server it manages. So every IDENTIFIER is offscale, while a message like `headscale unreachable`, the `headscale apikeys create` hint and the ACL assistant's prompt still say Headscale — because they are talking about the remote server, and renaming them would make the code lie about what it reached. 495 occurrences became 180, and the 180 are all of that second kind. ── The live bug this uncovered ── `headscaleSectionPath` built links to `/headscale/<section>`. The shell has no such route — plugin routes come from `plugin.route`, which is `/offscale` — and it redirects unknown paths to the home page. So every section link in the nav, the console and the server picker silently went home. The extraction moved the route and left the link builder behind. Also live: ServersView told the user to run `pm2 start ecosystem.config.cjs --only officer-headscale`, a process that has not existed since the sidecar was renamed. ── The correctness fix music already had ── api/router.ts hardcoded `prefix: '/api/offscale'`. The proxy strips `prefix.length` characters, so a literal is correct only for a first-party publisher; published by anyone else this mounts at `/api/p/<publisher>/offscale` and forwards the wrong subpath. Derived from `mountPrefix()` now, as music does. ── The rest ── - assets/icon.png — the OffScale artwork, 256px to match music's. The tile stops being a glyph badge. - First tests: 21 of them, over the version floor and the protobuf normalisers. Those are the two places a Headscale release actually breaks this, and they had no coverage at all. `meetsFloor` has a real trap pinned now — comparing minor first would refuse 1.0 as older than 0.29. - OFFSCALE_API.md — the contract was a 45-line comment inside sidecar/index.ts, which is not linkable and not published. Now a document, as MUSIC_API.md is. - web/panels.ts re-exported three components. A plugin cannot export components; that was residue of the platform importing them before extraction. - Comments pointed at src/servers/api/headscale/ and src/servers/sidecar/headscale/, neither of which has existed since the extraction. The crypto purpose moved headscale → offscale too, and the secret-store row was renamed rather than left to create a fresh key — the material is preserved, so this is reversible. Free to do only because offscale_servers had 0 rows; with one stored API key it would have been a migration.
78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { Loader2, ServerOff } from 'lucide-react';
|
|
import { NO_ACTIVE_SERVER } from './shared';
|
|
import { offscaleErrorMessage } from './useOffscaleServers';
|
|
import { ErrorNote } from './Cards';
|
|
|
|
// The loading / no-server / failed states every domain section shares.
|
|
//
|
|
// "No active server" is a 409 carrying a `code`, deliberately not a 404 and deliberately not an empty
|
|
// list — an empty node table would read as "your tailnet is empty", which is a very different and much
|
|
// more alarming statement than "you haven't picked a server".
|
|
|
|
function isNoActiveServer(err: unknown): boolean {
|
|
const raw = (err as { message?: unknown } | null)?.message;
|
|
if (typeof raw !== 'string') return false;
|
|
try {
|
|
return (JSON.parse(raw) as { code?: unknown }).code === NO_ACTIVE_SERVER;
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
type ViewShellProps = {
|
|
isLoading: boolean;
|
|
error: unknown;
|
|
/** What this section is called, for the loading and empty copy. */
|
|
label: string;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export const ViewShell = ({ isLoading, error, label, children }: ViewShellProps) => {
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center text-sm text-zinc-500">
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Loading {label}…
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error && isNoActiveServer(error)) {
|
|
return (
|
|
<div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/5 text-zinc-400">
|
|
<ServerOff className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="text-base font-semibold text-zinc-100">No server selected</div>
|
|
<p className="mt-1 text-sm text-zinc-500">Pick one in the Servers section to see its {label}.</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="p-4">
|
|
<ErrorNote>
|
|
Could not load {label}: {offscaleErrorMessage(error)}
|
|
</ErrorNote>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <div className="h-full overflow-y-auto p-4">{children}</div>;
|
|
};
|
|
|
|
/** Centred "nothing here yet" body for a section whose fetch succeeded but returned nothing. */
|
|
export const EmptyBody = ({ icon, title, hint }: { icon: ReactNode; title: string; hint: string }) => (
|
|
<div className="flex flex-col items-center gap-3 py-16 text-center">
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/5 text-zinc-400">{icon}</div>
|
|
<div>
|
|
<div className="text-base font-semibold text-zinc-100">{title}</div>
|
|
<p className="mt-1 max-w-sm text-sm text-zinc-500">{hint}</p>
|
|
</div>
|
|
</div>
|
|
);
|