ankka-console 0.10.0 → 0.11.0

package/dist/routes/service-apply.js

@@ -1,23 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Applies a descriptor: pasted, or read from a file. The console checks only that the text is JSON
- * and names a service; every rule about what a descriptor may say is the control plane's, and its
+ * Applies a descriptor: pasted, read from a file, or started from the one a service applied at an
+ * earlier generation (`?name=cart&generation=1`). The console checks only that the text is JSON and
+ * names a service; every rule about what a descriptor may say is the control plane's, and its
  * refusal is shown problem by problem beside the text.
  */
 import { redirect, useLoaderData } from "react-router";
-import { act, guard, pageData, useConsoleContext } from "../context.js";
+import { act, guard, pageData, projectShell, useConsoleContext } from "../context.js";
 import { ConsoleErrorBoundary } from "../ui/errors.js";
-import { Breadcrumbs, ConsoleForm, Submit } from "../ui/console.js";
+import { ConsoleForm, Submit } from "../ui/console.js";
+import { Page } from "../ui/shell.js";
 import { Refused, useRefusal } from "../ui/refused.js";
 import { data } from "react-router";
 export const meta = () => [{ title: "Apply a descriptor · ankka" }];
 export async function loader({ request, params, context }) {
     const ctx = useConsoleContext(context);
     return guard(ctx, async () => {
-        const project = await ctx.client.getProject(params.projectId);
+        const [project, services, page] = await Promise.all([ctx.client.getProject(params.projectId), ctx.client.listServices(params.projectId), pageData(ctx)]);
         const organization = await ctx.client.getOrganization(project.organizationId);
-        const name = new URL(request.url).searchParams.get("name");
-        return { console: await pageData(ctx), project, organization, name };
+        const query = new URL(request.url).searchParams;
+        const name = query.get("name");
+        const generation = query.get("generation");
+        const from = name && generation ? JSON.stringify(await ctx.client.descriptor(project.id, name, Number(generation)), null, 2) : undefined;
+        const tail = name
+            ? [{ label: name, to: `projects/${encodeURIComponent(project.id)}/services/${encodeURIComponent(name)}` }, { label: "Apply a descriptor" }]
+            : [{ label: "Apply a descriptor" }];
+        return { console: projectShell(page, organization, project, services, tail, undefined, name ?? undefined), project, organization, name, generation, from };
     });
 }
 const notApplied = (reason, descriptor) => data({ intent: "apply", status: 400, reason, problems: [reason], values: { descriptor } }, { status: 400 });
@@ -53,13 +61,8 @@ const example = `{
   }
 }`;
 export default function ApplyDescriptor() {
-    const { project: p, organization: o, name } = useLoaderData();
+    const { name, generation, from } = useLoaderData();
     const refusal = useRefusal("apply");
-    return (_jsxs("section", { className: "ac-page", children: [_jsx(Breadcrumbs, { trail: [
-                    { label: "Organizations", to: "" },
-                    { label: o.name, to: `organizations/${encodeURIComponent(o.id)}` },
-                    { label: p.name, to: `projects/${encodeURIComponent(p.id)}` },
-                    { label: "Apply a descriptor" },
-                ] }), _jsxs("h1", { children: ["Apply a descriptor", name ? ` to ${name}` : ""] }), _jsxs("p", { className: "ac-lede", children: ["A descriptor is a service's ", _jsx("code", { children: "service.json" }), ". Applying it creates the service, or updates it if one with that name exists."] }), _jsxs(ConsoleForm, { intent: "apply", encType: "multipart/form-data", className: "ac-form", children: [_jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "descriptor", children: "Descriptor" }), _jsx("textarea", { id: "descriptor", name: "descriptor", spellCheck: false, placeholder: example, defaultValue: refusal?.values.descriptor, "aria-describedby": "descriptor-hint", "aria-invalid": refusal ? true : undefined }), _jsx("p", { className: "ac-hint", id: "descriptor-hint", children: "Paste it here, or choose the file below instead." })] }), _jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "file", children: "Or a service.json file" }), _jsx("input", { id: "file", name: "file", type: "file", accept: "application/json,.json" })] }), _jsx(Refused, { intent: "apply" }), _jsx("div", { children: _jsx(Submit, { intent: "apply", children: "Apply" }) })] })] }));
+    return (_jsxs(Page, { children: [_jsxs("h1", { children: ["Apply a descriptor", name ? ` to ${name}` : ""] }), _jsxs("p", { className: "ac-lede", children: ["A descriptor is a service's ", _jsx("code", { children: "service.json" }), ". Applying it creates the service, or updates it if one with that name exists."] }), from ? _jsxs("p", { className: "ac-notice", children: ["This is the descriptor ", name, " applied at generation ", generation, ". Applying it, changed or not, is a new generation."] }) : null, _jsxs(ConsoleForm, { intent: "apply", encType: "multipart/form-data", className: "ac-card ac-form", children: [_jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "descriptor", children: "Descriptor" }), _jsx("textarea", { id: "descriptor", name: "descriptor", spellCheck: false, placeholder: example, defaultValue: refusal?.values.descriptor ?? from, "aria-describedby": "descriptor-hint", "aria-invalid": refusal ? true : undefined }), _jsx("p", { className: "ac-hint", id: "descriptor-hint", children: "Paste it here, or choose the file below instead." })] }), _jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "file", children: "Or a service.json file" }), _jsx("input", { id: "file", name: "file", type: "file", accept: "application/json,.json" })] }), _jsx(Refused, { intent: "apply" }), _jsx("div", { children: _jsx(Submit, { intent: "apply", primary: true, children: "Apply" }) })] })] }));
 }
 export const ErrorBoundary = ConsoleErrorBoundary;

package/dist/routes/service-history.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A service's history: every change its members made, newest first, each with the generation it
+ * produced and who made it, and for each that recorded a descriptor the image it ran and a digest
+ * of it. A row whose descriptor differs from the service's own offers a rollback to it. A section
+ * of the service, beside its overview, topology and logs.
+ */
+import { type ActionFunctionArgs, type LoaderFunctionArgs, type MetaFunction } from "react-router";
+import { ConsoleErrorBoundary } from "../ui/errors.tsx";
+export declare const meta: MetaFunction<typeof loader>;
+export declare function loader({ params, context }: LoaderFunctionArgs): Promise<{
+    console: import("../context.ts").ConsolePageData;
+    name: string;
+    projectId: string;
+    history: {
+        kind: string;
+        generation: number;
+        actor: {
+            subject: string;
+            display: string | undefined;
+            administrative: boolean;
+        } | undefined;
+        at: string | undefined;
+        image: string | undefined;
+        digest: string | undefined;
+        rolledBackTo: number | undefined;
+    }[];
+}>;
+export declare function action({ request, params, context }: ActionFunctionArgs): Promise<import("react-router").UNSAFE_DataWithResponseInit<import("../context.ts").ActionRefusal> | Response>;
+export default function ServiceHistory(): import("react").JSX.Element;
+export declare const ErrorBoundary: typeof ConsoleErrorBoundary;

package/dist/routes/service-history.js

@@ -0,0 +1,79 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A service's history: every change its members made, newest first, each with the generation it
+ * produced and who made it, and for each that recorded a descriptor the image it ran and a digest
+ * of it. A row whose descriptor differs from the service's own offers a rollback to it. A section
+ * of the service, beside its overview, topology and logs.
+ */
+import { redirect, useLoaderData } from "react-router";
+import { act, applyPrimary, guard, pageData, projectShell, text, useConsoleContext } from "../context.js";
+import { ConsoleErrorBoundary } from "../ui/errors.js";
+import { ConsoleForm, ConsoleLink, Submit, useConsole, when } from "../ui/console.js";
+import { Refused } from "../ui/refused.js";
+import { HostActions } from "../extensions/render.js";
+import { Page, ServiceSections } from "../ui/shell.js";
+export const meta = ({ loaderData }) => [{ title: `History of ${loaderData?.name ?? "a service"} · ankka` }];
+export async function loader({ params, context }) {
+    const ctx = useConsoleContext(context);
+    const { projectId, name } = params;
+    return guard(ctx, async () => {
+        const [history, project, services, page] = await Promise.all([
+            ctx.client.history(projectId, name),
+            ctx.client.getProject(projectId),
+            ctx.client.listServices(projectId),
+            pageData(ctx),
+        ]);
+        const organization = await ctx.client.getOrganization(project.organizationId);
+        return {
+            console: projectShell(page, organization, project, services, [{ label: name, to: `projects/${encodeURIComponent(projectId)}/services/${encodeURIComponent(name)}` }, { label: "History" }], applyPrimary(projectId, name), name),
+            name,
+            projectId,
+            history: [...history].reverse(),
+        };
+    });
+}
+export async function action({ request, params, context }) {
+    const ctx = useConsoleContext(context);
+    const { projectId, name } = params;
+    const form = await request.formData();
+    const intent = text(form, "intent");
+    return act(ctx, intent, form, async () => {
+        if (intent !== "rollback")
+            throw new Response(`unknown operation '${intent}'`, { status: 400 });
+        await ctx.client.rollback(projectId, name, Number(text(form, "generation")));
+        return redirect(ctx.href(`projects/${encodeURIComponent(projectId)}/services/${encodeURIComponent(name)}/history`));
+    });
+}
+/**
+ * The generations a rollback can be offered at: each whose entry recorded a descriptor different
+ * from the one the service has now. The newest entry that recorded one is the service's own, since
+ * only an apply or a rollback changes it. An entry recorded before digests were kept offers
+ * nothing, though the CLI can still roll back to it; the control plane decides either way.
+ */
+function rollbackTargets(history) {
+    const recorded = history.filter((h) => h.digest !== undefined);
+    if (recorded.length === 0)
+        return new Set();
+    const current = recorded.reduce((a, b) => (b.generation > a.generation ? b : a)).digest;
+    return new Set(recorded.filter((h) => h.digest !== current).map((h) => h.generation));
+}
+function RollBack({ generation, image, entity }) {
+    const { shows } = useConsole();
+    return (_jsxs(_Fragment, { children: [shows("service.rollback") ? (_jsxs("details", { className: "ac-more", children: [_jsx("summary", { children: "Roll back" }), _jsxs("p", { children: ["Apply generation ", generation, "'s descriptor again", image ? ` (image ${image})` : "", " as a new generation."] }), _jsxs(ConsoleForm, { intent: "rollback", children: [_jsx("input", { type: "hidden", name: "generation", value: generation }), _jsxs(Submit, { intent: "rollback", children: ["Roll back to generation ", generation] })] })] })) : null, _jsx(HostActions, { operation: "service.rollback", entity: entity })] }));
+}
+const words = {
+    applied: "Applied",
+    "rolled-back": "Rolled back",
+    restarted: "Restarted",
+    paused: "Paused",
+    resumed: "Resumed",
+    exposed: "Exposed",
+    unexposed: "Unexposed",
+    deleted: "Deleted",
+};
+export default function ServiceHistory() {
+    const { name, projectId, history } = useLoaderData();
+    const offered = rollbackTargets(history);
+    return (_jsxs(Page, { children: [_jsxs("div", { className: "ac-head", children: [_jsxs("h1", { children: ["History of ", name] }), _jsx(ServiceSections, { projectId: projectId, name: name, current: "history" })] }), _jsxs("section", { className: "ac-card", "aria-labelledby": "history", children: [_jsx("h2", { id: "history", children: "History" }), history.length === 0 ? (_jsx("p", { className: "ac-empty", children: "Nothing recorded yet." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "What" }), _jsx("th", { scope: "col", className: "ac-num", children: "Generation" }), _jsx("th", { scope: "col", children: "Image" }), _jsx("th", { scope: "col", children: "Digest" }), _jsx("th", { scope: "col", children: "Who" }), _jsx("th", { scope: "col", children: "When" }), _jsx("th", { scope: "col", "aria-label": "Roll back" })] }) }), _jsx("tbody", { children: history.map((h, i) => (_jsxs("tr", { children: [_jsx("td", { children: h.rolledBackTo !== undefined ? `Rolled back to generation ${h.rolledBackTo}` : (words[h.kind] ?? h.kind) }), _jsx("td", { className: "ac-num", children: h.generation }), _jsx("td", { children: h.image ?? "—" }), _jsx("td", { children: h.digest ? (_jsx(ConsoleLink, { to: `projects/${encodeURIComponent(projectId)}/services/apply?name=${encodeURIComponent(name)}&generation=${h.generation}`, "aria-label": `Generation ${h.generation}'s descriptor`, children: _jsx("code", { title: h.digest, children: h.digest.slice(0, 12) }) })) : ("—") }), _jsxs("td", { children: [h.actor ? (h.actor.display ?? h.actor.subject) : "—", h.actor?.administrative ? " (as administrator)" : ""] }), _jsx("td", { children: when(h.at) }), _jsx("td", { children: offered.has(h.generation) ? _jsx(RollBack, { generation: h.generation, image: h.image, entity: { name, projectId, entry: h } }) : null })] }, i))) })] }) })), _jsx(Refused, { intent: "rollback" })] })] }));
+}
+export const ErrorBoundary = ConsoleErrorBoundary;

package/dist/routes/service-topology.d.ts

@@ -0,0 +1,153 @@
+import { type LoaderFunctionArgs, type MetaFunction } from "react-router";
+import { ConsoleErrorBoundary } from "../ui/errors.tsx";
+export declare const meta: MetaFunction<typeof loader>;
+export declare function loader({ params, context }: LoaderFunctionArgs): Promise<{
+    console: import("../context.ts").ConsolePageData;
+    service: {
+        name: string;
+        projectId: string;
+        lifecycle: string;
+        generation: number;
+        image: string;
+        readyInstances: number;
+        desiredInstances: number;
+        detail: string | undefined;
+        confirmed: boolean;
+        database: string | undefined;
+        hostname: string | undefined;
+        exposed: boolean;
+        suspended: boolean;
+        paused: boolean;
+        hosting: string;
+        protocol: string | undefined;
+        mounts: {
+            path: string;
+            service: string;
+            state: string;
+        }[];
+        callers: string[];
+        processPort: number | undefined;
+        broker: string | undefined;
+        undeclaredTopics: string[] | undefined;
+        topicChecks: {
+            topic: string | undefined;
+            service: string;
+            component: string;
+            direction: string;
+            stated: string | undefined;
+            state: string;
+        }[] | undefined;
+        topicSources: {
+            kind: string;
+            component: string;
+            topic: string;
+            group: string;
+            start: string;
+            version: number;
+            recordedVersion: number | undefined;
+            behind: boolean;
+            broker: string | undefined;
+            contract: string | undefined;
+            lag: number | undefined;
+            failing: string | undefined;
+        }[] | undefined;
+        objectStorage: string | undefined;
+        bucket: string | undefined;
+        bucketAddress: string | undefined;
+    };
+    project: {
+        id: string;
+        name: string;
+        organizationId: string;
+        registry: {
+            server: string;
+            username: string;
+            setAt: string | undefined;
+            setBy: string | undefined;
+        } | undefined;
+    };
+    organization: {
+        id: string;
+        name: string;
+        projects: number;
+        disabled: boolean;
+        role: NonNullable<"member" | "owner"> | undefined;
+        quota: {
+            projects: number | undefined;
+            services: number | undefined;
+            instances: number | undefined;
+        } | undefined;
+        usage: {
+            projects: number;
+            services: number;
+            instances: number;
+        };
+    };
+    topology: {
+        service: string;
+        running: number;
+        contributing: number;
+        partial: boolean;
+        instances: {
+            pod: string;
+            status: "failed" | "ok" | "unreachable" | "unsupported";
+            problem: string | undefined;
+            runtime: string | undefined;
+            readAt: string | undefined;
+        }[];
+        window: {
+            seconds: number;
+            since: string;
+            calls: number;
+            unanswered: number;
+        };
+        nodes: {
+            id: string;
+            kind: string;
+            layer: number;
+            platform: boolean;
+            handlers: {
+                name: string;
+                type: string;
+                streaming: boolean | undefined;
+            }[];
+        }[];
+        declared: {
+            from: string;
+            to: string;
+            kind: string;
+        }[];
+        calls: {
+            from: string;
+            to: string;
+            pairs: {
+                caller: string;
+                callee: string;
+                handled: {
+                    ok: number;
+                    refused: number;
+                    failed: number;
+                };
+                unanswered: {
+                    timedOut: number;
+                    undelivered: number;
+                };
+                durationMillis: {
+                    p50: number;
+                    p99: number;
+                    max: number;
+                    bucketed: boolean;
+                };
+                streaming: boolean;
+                histogram: number[];
+            }[];
+        }[];
+        differences: {
+            node: string;
+            presentOn: string[];
+        }[];
+    } | null;
+    none: string | undefined;
+}>;
+export default function ServiceTopologyPage(): import("react").JSX.Element;
+export declare const ErrorBoundary: typeof ConsoleErrorBoundary;

package/dist/routes/service-topology.js

@@ -0,0 +1,54 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A deployed service's topology: what it is made of and what calls what, merged by the control plane
+ * from every running instance. The page says how many instances answered, names any that did not, and
+ * marks the parts not every instance has. With scripts running it follows new calls as they are counted.
+ */
+import { useMemo, useState } from "react";
+import { useLoaderData } from "react-router";
+import { applyPrimary, guard, pageData, projectShell, useConsoleContext } from "../context.js";
+import { ControlPlaneError } from "../client/errors.js";
+import { ConsoleErrorBoundary } from "../ui/errors.js";
+import { Page, ServiceSections } from "../ui/shell.js";
+import { useTopologyStream } from "../ui/use-stream.js";
+import { observedLine, view, edgeMark, totals } from "../ui/topology/layout.js";
+import { Graph } from "../ui/topology/Graph.js";
+import { Table, duration } from "../ui/topology/Table.js";
+export const meta = ({ loaderData }) => [{ title: `Topology of ${loaderData?.service.name ?? "a service"} · ankka` }];
+export async function loader({ params, context }) {
+    const ctx = useConsoleContext(context);
+    const { projectId, name } = params;
+    return guard(ctx, async () => {
+        const [service, project, services, page] = await Promise.all([ctx.client.getService(projectId, name), ctx.client.getProject(projectId), ctx.client.listServices(projectId), pageData(ctx)]);
+        const organization = await ctx.client.getOrganization(project.organizationId);
+        let topology = null;
+        let none;
+        try {
+            topology = await ctx.client.topology(projectId, name);
+        }
+        catch (e) {
+            // No running instance is nothing to show yet, not an error.
+            if (e instanceof ControlPlaneError && e.status === 404)
+                none = e.reason;
+            else
+                throw e;
+        }
+        const shell = projectShell(page, organization, project, services, [{ label: name, to: `projects/${encodeURIComponent(projectId)}/services/${encodeURIComponent(name)}` }, { label: "Topology" }], applyPrimary(projectId, name), name);
+        return { console: shell, service, project, organization, topology, none };
+    });
+}
+export default function ServiceTopologyPage() {
+    const { service, project: p, topology: initial, none } = useLoaderData();
+    const { topology, state } = useTopologyStream(p.id, service.name, initial);
+    const [showPlatform, setShowPlatform] = useState(false);
+    const [selected, setSelected] = useState(null);
+    const shown = useMemo(() => (topology ? view(topology, { showPlatform }) : null), [topology, showPlatform]);
+    const differs = useMemo(() => new Map((topology?.differences ?? []).map((d) => [d.node, d.presentOn])), [topology]);
+    const chosen = shown?.nodes.find((n) => n.id === selected) ?? null;
+    return (_jsxs(Page, { children: [_jsxs("div", { className: "ac-head", children: [_jsxs("h1", { children: ["Topology of ", service.name] }), _jsx(ServiceSections, { projectId: p.id, name: service.name, current: "topology" })] }), none ? _jsxs("p", { className: "ac-empty", children: [none, ". A topology exists only while an instance runs."] }) : null, topology && shown ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "ac-actions", children: [_jsxs("span", { "data-instances": true, children: [topology.contributing, " of ", topology.running, " instance", topology.running === 1 ? "" : "s", " answered"] }), topology.partial ? _jsx("span", { className: "ac-status ac-status-trouble ac-topology-partial", children: "Partial" }) : null, _jsx("span", { className: state === "live" ? "ac-live" : undefined, children: state === "live" ? "Following new calls" : state === "connecting" ? "Connecting to follow new calls" : null })] }), topology.partial ? (_jsxs("div", { className: "ac-notice", role: "status", children: [_jsx("p", { children: "These instances did not contribute, so the counts below are of the others only:" }), _jsx("ul", { children: topology.instances
+                                    .filter((i) => i.status !== "ok")
+                                    .map((i) => (_jsxs("li", { "data-missing": i.pod, children: [i.pod, ": ", i.status, i.problem ? ` (${i.problem})` : ""] }, i.pod))) })] })) : null, topology.differences.length > 0 ? (_jsxs("div", { className: "ac-notice", children: [_jsx("p", { children: "Not on every instance:" }), _jsx("ul", { children: topology.differences.map((d) => (_jsxs("li", { "data-difference": d.node, children: [d.node, ", on ", d.presentOn.join(", ")] }, d.node))) })] })) : null, _jsxs("p", { className: "ac-hint", children: [observedLine(topology.window, Date.now()), " Calls are observed, not complete."] }), _jsx("label", { className: "ac-field", children: _jsxs("span", { children: [_jsx("input", { type: "checkbox", checked: showPlatform, onChange: (e) => setShowPlatform(e.target.checked) }), " Show the platform's own components", shown.hiddenPlatform > 0 && !showPlatform ? ` (${shown.hiddenPlatform} left out)` : ""] }) }), shown.nodes.length === 0 ? (_jsx("p", { className: "ac-empty", children: "This service registers no components." })) : (_jsxs("div", { className: "ac-topology", children: [_jsx("div", { className: "ac-topology-picture", children: _jsx(Graph, { shown: shown, differs: new Set(differs.keys()), selected: selected, onSelect: setSelected }) }), chosen ? (_jsxs("aside", { className: "ac-card ac-topology-detail", "aria-label": `About ${chosen.label}`, children: [_jsx("h2", { children: chosen.label }), _jsx("p", { children: chosen.kind }), _jsx("h3", { children: "Calls" }), _jsx("ul", { children: shown.calls
+                                            .filter((c) => c.from === chosen.id || c.to === chosen.id)
+                                            .flatMap((c) => c.pairs.map((pair) => (_jsxs("li", { children: [c.from === chosen.id ? `to ${c.to}` : `from ${c.from}`, ": ", pair.caller, " \u2192 ", pair.callee, pair.streaming ? " (stream)" : "", ", handled ", totals([pair]).handled, ", unanswered ", totals([pair]).unanswered, edgeMark([pair]) ? ", going wrong" : "", ", ", duration(pair), " (approximate)"] }, `${c.from}>${c.to}:${pair.caller}>${pair.callee}`)))) })] })) : null] })), _jsxs("section", { className: "ac-card", "aria-labelledby": "as-text", children: [_jsx("h2", { id: "as-text", children: "As text" }), _jsx(Table, { shown: shown, differs: differs })] })] })) : null] }));
+}
+export const ErrorBoundary = ConsoleErrorBoundary;

package/dist/routes/service.d.ts

@@ -25,17 +25,41 @@ export declare function loader({ params, context }: LoaderFunctionArgs): Promise
         paused: boolean;
         hosting: string;
         protocol: string | undefined;
+        mounts: {
+            path: string;
+            service: string;
+            state: string;
+        }[];
+        callers: string[];
+        processPort: number | undefined;
+        broker: string | undefined;
+        undeclaredTopics: string[] | undefined;
+        topicChecks: {
+            topic: string | undefined;
+            service: string;
+            component: string;
+            direction: string;
+            stated: string | undefined;
+            state: string;
+        }[] | undefined;
+        topicSources: {
+            kind: string;
+            component: string;
+            topic: string;
+            group: string;
+            start: string;
+            version: number;
+            recordedVersion: number | undefined;
+            behind: boolean;
+            broker: string | undefined;
+            contract: string | undefined;
+            lag: number | undefined;
+            failing: string | undefined;
+        }[] | undefined;
+        objectStorage: string | undefined;
+        bucket: string | undefined;
+        bucketAddress: string | undefined;
     };
-    history: {
-        kind: string;
-        generation: number;
-        actor: {
-            subject: string;
-            display: string | undefined;
-            administrative: boolean;
-        } | undefined;
-        at: string | undefined;
-    }[];
     project: {
         id: string;
         name: string;

package/dist/routes/service.js

@@ -5,9 +5,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * state the control plane reports, never what the console expected.
  */
 import { redirect, useLoaderData } from "react-router";
-import { act, guard, pageData, text, useConsoleContext } from "../context.js";
+import { act, applyPrimary, guard, pageData, projectShell, text, useConsoleContext } from "../context.js";
 import { ConsoleErrorBoundary } from "../ui/errors.js";
-import { Breadcrumbs, ConsoleForm, ConsoleLink, Submit, useConsole, when } from "../ui/console.js";
+import { ConsoleForm, Submit, useConsole } from "../ui/console.js";
+import { Page, SectionTitle, ServiceSections } from "../ui/shell.js";
+import { Shape } from "../ui/shape.js";
+import { runsAs } from "../ui/hosting.js";
 import { Refused, useRefusal } from "../ui/refused.js";
 import { Lifecycle } from "../ui/status.js";
 import { useServiceStream } from "../ui/use-stream.js";
@@ -17,14 +20,20 @@ export async function loader({ params, context }) {
     const ctx = useConsoleContext(context);
     const { projectId, name } = params;
     return guard(ctx, async () => {
-        const [service, history, project, page] = await Promise.all([
+        const [service, project, services, page] = await Promise.all([
             ctx.client.getService(projectId, name),
-            ctx.client.history(projectId, name),
             ctx.client.getProject(projectId),
+            ctx.client.listServices(projectId),
             pageData(ctx),
         ]);
         const organization = await ctx.client.getOrganization(project.organizationId);
-        return { console: page, service, history: [...history].reverse(), project, organization, panels: await loadPanels(ctx, "service", service) };
+        return {
+            console: projectShell(page, organization, project, services, [{ label: name }], applyPrimary(projectId, name), name),
+            service,
+            project,
+            organization,
+            panels: await loadPanels(ctx, "service", service),
+        };
     });
 }
 const serviceOperations = ["pause", "resume", "restart", "expose", "unexpose"];
@@ -44,30 +53,26 @@ export async function action({ request, params, context }) {
         return redirect(ctx.href(`projects/${encodeURIComponent(projectId)}/services/${encodeURIComponent(name)}`));
     });
 }
-const history = {
-    applied: "Applied",
-    restarted: "Restarted",
-    paused: "Paused",
-    resumed: "Resumed",
-    exposed: "Exposed",
-    unexposed: "Unexposed",
-    deleted: "Deleted",
-};
+/** A service's bucket, that it has a store of its own, or none — and a phrase while it waits or failed. */
+function objectStorage(s) {
+    if (s.objectStorage && /waiting|failed/.test(s.objectStorage))
+        return s.objectStorage;
+    if (s.bucket)
+        return s.bucket;
+    if (s.objectStorage === "supplied")
+        return "Its own";
+    return "None";
+}
 function Operation({ intent, label, operation, danger, entity }) {
     const { shows } = useConsole();
     return (_jsxs(_Fragment, { children: [shows(operation) ? (_jsx(ConsoleForm, { intent: intent, children: _jsx(Submit, { intent: intent, danger: danger, children: label }) })) : null, _jsx(HostActions, { operation: operation, entity: entity })] }));
 }
 export default function Service() {
     const data = useLoaderData();
-    const { project: p, organization: o, panels } = data;
+    const { project: p, panels } = data;
     const { status: s, state } = useServiceStream(p.id, data.service.name, data.service);
     const deleteRefused = useRefusal("delete") !== undefined;
-    const path = `projects/${encodeURIComponent(p.id)}/services/${encodeURIComponent(s.name)}`;
-    return (_jsxs("section", { className: "ac-page", children: [_jsx(Breadcrumbs, { trail: [
-                    { label: "Organizations", to: "" },
-                    { label: o.name, to: `organizations/${encodeURIComponent(o.id)}` },
-                    { label: p.name, to: `projects/${encodeURIComponent(p.id)}` },
-                    { label: s.name },
-                ] }), _jsx("h1", { children: s.name }), _jsxs("p", { "aria-live": "polite", className: "ac-state-line", children: [_jsx(Lifecycle, { lifecycle: s.lifecycle, confirmed: s.confirmed }), state === "live" ? _jsx("span", { className: "ac-live", children: " Updating as the platform reports" }) : null] }), s.detail ? _jsx("p", { className: "ac-notice", children: s.detail }) : null, _jsxs("dl", { className: "ac-facts", children: [_jsx("dt", { children: "Instances" }), _jsxs("dd", { children: [s.readyInstances, " ready of ", s.desiredInstances] }), _jsx("dt", { children: "Image" }), _jsx("dd", { children: s.image }), _jsx("dt", { children: "Generation" }), _jsx("dd", { children: s.generation }), _jsx("dt", { children: "Address" }), _jsx("dd", { children: s.hostname ? _jsx("a", { href: s.hostname, children: s.hostname }) : s.exposed ? "Exposed; the platform has no address for it yet" : "Not exposed" }), _jsx("dt", { children: "Database" }), _jsx("dd", { children: s.database ?? "Nothing reported yet" }), _jsx("dt", { children: "Runs as" }), _jsx("dd", { children: s.hosting === "process" ? `A process beside the platform's sidecar${s.protocol ? `, protocol ${s.protocol}` : ""}` : "Embedded in the platform's runtime" }), _jsx("dt", { children: "Stopped by" }), _jsx("dd", { children: s.suspended ? "Its organization is disabled" : s.paused ? "Its members paused it" : "Nobody" }), _jsx("dt", { children: "Report" }), _jsx("dd", { children: s.confirmed ? "Confirmed by the cluster" : "The last known state; the cluster has not confirmed it" })] }), _jsxs("div", { className: "ac-actions", "aria-label": "Operations", children: [s.paused ? _jsx(Operation, { intent: "resume", label: "Resume", operation: "service.resume", entity: s }) : _jsx(Operation, { intent: "pause", label: "Pause", operation: "service.pause", entity: s }), _jsx(Operation, { intent: "restart", label: "Restart", operation: "service.restart", entity: s }), s.exposed ? _jsx(Operation, { intent: "unexpose", label: "Unexpose", operation: "service.unexpose", entity: s }) : _jsx(Operation, { intent: "expose", label: "Expose", operation: "service.expose", entity: s }), _jsx(ConsoleLink, { to: `${path}/logs`, className: "ac-button ac-button-quiet", children: "Logs" }), _jsx(ConsoleLink, { to: `projects/${encodeURIComponent(p.id)}/services/apply?name=${encodeURIComponent(s.name)}`, className: "ac-button ac-button-quiet", children: "Apply a new descriptor" })] }), serviceOperations.map((op) => (_jsx(Refused, { intent: op }, op))), _jsx(Panels, { kind: "service", entity: s, loaded: panels }), _jsx("h2", { children: "History" }), data.history.length === 0 ? (_jsx("p", { className: "ac-empty", children: "Nothing recorded yet." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "What" }), _jsx("th", { scope: "col", className: "ac-num", children: "Generation" }), _jsx("th", { scope: "col", children: "Who" }), _jsx("th", { scope: "col", children: "When" })] }) }), _jsx("tbody", { children: data.history.map((h, i) => (_jsxs("tr", { children: [_jsx("td", { children: history[h.kind] ?? h.kind }), _jsx("td", { className: "ac-num", children: h.generation }), _jsxs("td", { children: [h.actor ? (h.actor.display ?? h.actor.subject) : "—", h.actor?.administrative ? " (as administrator)" : ""] }), _jsx("td", { children: when(h.at) })] }, i))) })] }) })), _jsxs("details", { className: "ac-more", open: deleteRefused || undefined, children: [_jsx("summary", { children: "Delete" }), _jsxs("div", { className: "ac-danger-zone", children: [_jsxs("p", { children: ["Deleting ", s.name, " stops it and removes it from the project. Its database is kept: applying a descriptor with this name again brings the service back with its data."] }), _jsx(Operation, { intent: "delete", label: "Delete service", operation: "service.delete", danger: true, entity: s }), _jsx(Refused, { intent: "delete" })] })] })] }));
+    const inspector = (_jsxs(_Fragment, { children: [_jsxs("section", { className: "ac-ops", "aria-labelledby": "operations-title", children: [_jsx(SectionTitle, { children: _jsx("span", { id: "operations-title", children: "Operations" }) }), s.paused ? _jsx(Operation, { intent: "resume", label: "Resume", operation: "service.resume", entity: s }) : _jsx(Operation, { intent: "pause", label: "Pause", operation: "service.pause", entity: s }), _jsx(Operation, { intent: "restart", label: "Restart", operation: "service.restart", entity: s }), s.exposed ? _jsx(Operation, { intent: "unexpose", label: "Unexpose", operation: "service.unexpose", entity: s }) : _jsx(Operation, { intent: "expose", label: "Expose", operation: "service.expose", entity: s })] }), serviceOperations.map((op) => (_jsx(Refused, { intent: op }, op))), _jsxs("details", { className: "ac-more", open: deleteRefused || undefined, children: [_jsx("summary", { children: "Delete" }), _jsxs("div", { className: "ac-danger-zone", children: [_jsxs("p", { children: ["Deleting ", s.name, " stops it and removes it from the project. Its database is kept, and so is its bucket if it has one: applying a descriptor with this name again brings the service back with its data."] }), _jsx(Operation, { intent: "delete", label: "Delete service", operation: "service.delete", danger: true, entity: s }), _jsx(Refused, { intent: "delete" })] })] })] }));
+    return (_jsxs(Page, { inspector: inspector, children: [_jsxs("div", { className: "ac-head", children: [_jsx("h1", { children: s.name }), _jsxs("p", { "aria-live": "polite", className: "ac-actions ac-state-line", children: [_jsx("span", { className: "ac-pill", children: _jsx(Lifecycle, { lifecycle: s.lifecycle, confirmed: s.confirmed }) }), state === "live" ? _jsx("span", { className: "ac-live", children: " Updating as the platform reports" }) : null] }), _jsx(ServiceSections, { projectId: p.id, name: s.name, current: "overview" })] }), s.detail ? _jsx("p", { className: "ac-notice", children: s.detail }) : null, _jsx(Shape, { service: s }), _jsxs("section", { className: "ac-card", "aria-labelledby": "reported", children: [_jsx("h2", { id: "reported", children: "Reported by the cluster" }), _jsxs("dl", { className: "ac-facts", children: [_jsx("dt", { children: "Instances" }), _jsxs("dd", { children: [s.readyInstances, " ready of ", s.desiredInstances] }), _jsx("dt", { children: "Image" }), _jsx("dd", { children: s.image }), _jsx("dt", { children: "Generation" }), _jsx("dd", { children: s.generation }), _jsx("dt", { children: "Address" }), _jsx("dd", { children: s.hostname ? _jsx("a", { href: s.hostname, children: s.hostname }) : s.exposed ? "Exposed; the platform has no address for it yet" : "Not exposed" }), _jsx("dt", { children: "Database" }), _jsx("dd", { children: s.hosting === "web" ? "None" : (s.database ?? "Nothing reported yet") }), _jsx("dt", { children: "Object storage" }), _jsxs("dd", { children: [objectStorage(s), s.bucketAddress ? _jsxs("span", { className: "ac-hint", "data-bucket-address": true, children: [" ", s.bucketAddress] }) : null] }), s.broker ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "Broker" }), _jsx("dd", { children: s.broker })] })) : null, s.undeclaredTopics && s.undeclaredTopics.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "Undeclared topics" }), _jsx("dd", { children: _jsx("ul", { className: "ac-topics", children: s.undeclaredTopics.map((t) => (_jsx("li", { "data-topic": t, children: _jsx("code", { children: t }) }, t))) }) })] })) : null, s.topicSources && s.topicSources.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "Topic sources" }), _jsx("dd", { children: _jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", "data-topic-sources": true, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Component" }), _jsx("th", { scope: "col", children: "Topic" }), _jsx("th", { scope: "col", children: "Group" }), _jsx("th", { scope: "col", className: "ac-num", children: "Version" }), _jsx("th", { scope: "col", className: "ac-num", children: "Lag" }), _jsx("th", { scope: "col", children: "Failing" })] }) }), _jsx("tbody", { children: s.topicSources.map((t) => (_jsxs("tr", { "data-topic-source": t.component, "data-failing": t.failing ? "yes" : "no", children: [_jsx("td", { children: t.component }), _jsxs("td", { children: [_jsx("code", { children: t.broker ? `${t.topic}@${t.broker}` : t.topic }), t.contract ? ` as ${t.contract}` : ""] }), _jsx("td", { children: _jsx("code", { children: t.group }) }), _jsx("td", { className: "ac-num", children: t.version }), _jsx("td", { className: "ac-num", children: t.lag ?? "—" }), _jsx("td", { children: t.failing ? _jsx("span", { className: "ac-notice", children: t.failing }) : "—" })] }, t.component))) })] }) }) })] })) : null, s.topicChecks && s.topicChecks.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "Topic checks" }), _jsx("dd", { children: _jsx("ul", { className: "ac-topics", children: s.topicChecks.map((c) => (_jsxs("li", { "data-check": c.state, children: [c.component, " ", c.direction, ": ", c.state, c.state === "mismatch" ? ` (${c.stated ?? "none"})` : ""] }, `${c.component}/${c.direction}`))) }) })] })) : null, _jsx("dt", { children: "Runs as" }), _jsx("dd", { children: runsAs(s) }), s.hosting === "web" ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "Admits" }), _jsx("dd", { children: ["The internet", ...s.callers.map((c) => (c === "*" ? `Every service in ${p.name}` : c))].join(", ") }), _jsx("dt", { children: "Mounts" }), _jsx("dd", { children: s.mounts.length === 0 ? ("None") : (_jsx("ul", { className: "ac-mounts", children: s.mounts.map((m) => (_jsxs("li", { "data-mount": m.path, children: [_jsx("code", { children: m.path }), " \u2192 ", m.service, m.state && m.state !== "ok" ? ` (${m.state})` : ""] }, m.path))) })) })] })) : null, _jsx("dt", { children: "Stopped by" }), _jsx("dd", { children: s.suspended ? "Its organization is disabled" : s.paused ? "Its members paused it" : "Nobody" }), _jsx("dt", { children: "Report" }), _jsx("dd", { children: s.confirmed ? "Confirmed by the cluster" : "The last known state; the cluster has not confirmed it" })] })] }), _jsx(Panels, { kind: "service", entity: s, loaded: panels })] }));
 }
 export const ErrorBoundary = ConsoleErrorBoundary;

package/dist/routes/stream.service.js

@@ -19,8 +19,10 @@ export async function loader({ request, params, context }) {
     const name = params.name;
     const query = new URL(request.url).searchParams;
     const follow = query.has("logs");
+    const topology = query.has("topology");
+    let lastTopology = "";
     const tail = Math.min(Math.max(Number(query.get("tail") ?? 200) || 200, 1), 5_000);
-    const logQuery = { instance: query.get("instance") || undefined, previous: query.get("previous") === "true", tail };
+    const logQuery = { instance: query.get("instance") || undefined, previous: query.get("previous") === "true", platform: query.get("platform") === "true", tail };
     const follower = new LogFollower(tail);
     const primed = new Set();
     let last = "";
@@ -40,6 +42,21 @@ export async function loader({ request, params, context }) {
                     return;
                 throw e;
             }
+            if (topology) {
+                try {
+                    const now = await ctx.client.topology(projectId, name);
+                    const json = JSON.stringify(now);
+                    if (json !== lastTopology) {
+                        lastTopology = json;
+                        sink.send("topology", now);
+                    }
+                }
+                catch (e) {
+                    if (e instanceof SignInRequired)
+                        return void ended(sink, e);
+                    // No running instance has no topology; its status says why.
+                }
+            }
             if (!follow)
                 return;
             try {