feat(console-web): replace TanStack UI with Solid host pages
- move the management frontend under the wasmeld-console crate - use a persistent Host shell with disposable iframe page documents - version Host/Page postMessage state and command contracts - migrate runtime, service, WIT, invocation, and settings workflows - add Tailwind CSS v4, responsive layouts, and Host-owned dialogs - emit a dependency-free PWA worker with API cache exclusions - remove the superseded root TanStack Start application
This commit is contained in:
Maofeng
@@ -0,0 +1,258 @@
|
||||
import {
|
||||
Activity,
|
||||
AlertTriangle,
|
||||
CircleStop,
|
||||
CloudUpload,
|
||||
Cpu,
|
||||
Package,
|
||||
Play,
|
||||
RefreshCw,
|
||||
RotateCcw,
|
||||
Zap,
|
||||
} from "lucide-solid";
|
||||
import { createMemo, For, Show, type JSXElement } from "solid-js";
|
||||
import { PageHeading } from "../../components/ui/page-heading";
|
||||
import { ServiceTable } from "../../components/ui/service-table";
|
||||
import { eventsFrom, servicesFrom } from "../../lib/view-state";
|
||||
import { formatDuration } from "../../lib/model";
|
||||
import type { PageProps } from "../types";
|
||||
|
||||
export default function OverviewPage(props: PageProps) {
|
||||
const services = createMemo(() => servicesFrom(props.state()));
|
||||
const events = createMemo(() => eventsFrom(props.state()));
|
||||
const running = createMemo(
|
||||
() => services().filter((service) => service.status === "running").length,
|
||||
);
|
||||
const totalCalls = createMemo(() =>
|
||||
services().reduce((total, service) => total + service.calls, 0),
|
||||
);
|
||||
const errors = createMemo(() => services().reduce((total, service) => total + service.errors, 0));
|
||||
|
||||
return (
|
||||
<main class="page">
|
||||
<Show when={props.state()} fallback={<OverviewSkeleton />}>
|
||||
{(state) => (
|
||||
<>
|
||||
<PageHeading
|
||||
eyebrow="LOCAL RUNTIME"
|
||||
title="运行概览"
|
||||
description={`${services().length} 个已注册版本，${running()} 个 Actor 正在运行。`}
|
||||
actions={
|
||||
<>
|
||||
<button
|
||||
class="icon-btn"
|
||||
type="button"
|
||||
aria-label="刷新"
|
||||
title="刷新"
|
||||
onClick={() => props.command({ type: "refresh" })}
|
||||
>
|
||||
<RefreshCw size={16} />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="button"
|
||||
onClick={() => props.command({ type: "open-register" })}
|
||||
>
|
||||
<CloudUpload size={16} />
|
||||
注册组件
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<section class="metric-grid" aria-label="关键指标">
|
||||
<Metric
|
||||
icon={<Package size={18} />}
|
||||
tone="bg-cyan-soft text-cyan-strong"
|
||||
label="服务版本"
|
||||
value={services().length.toString()}
|
||||
note={`${state().snapshot?.deployments.length ?? 0} 个对外服务`}
|
||||
/>
|
||||
<Metric
|
||||
icon={<Activity size={18} />}
|
||||
tone="bg-brand-soft text-brand"
|
||||
label="运行实例"
|
||||
value={running().toString()}
|
||||
note={`${services().length - running()} 个未运行`}
|
||||
/>
|
||||
<Metric
|
||||
icon={<Zap size={18} />}
|
||||
tone="bg-amber-soft text-amber-strong"
|
||||
label="累计调用"
|
||||
value={totalCalls().toLocaleString("zh-CN")}
|
||||
note="持久化统计"
|
||||
/>
|
||||
<Metric
|
||||
icon={<AlertTriangle size={18} />}
|
||||
tone="bg-coral-soft text-coral-strong"
|
||||
label="调用异常"
|
||||
value={errors().toString()}
|
||||
note={errors() > 0 ? "需要检查" : "无异常"}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="panel mb-5 grid lg:grid-cols-[minmax(280px,1.4fr)_repeat(3,minmax(130px,1fr))]">
|
||||
<div class="flex items-center gap-3 border-b border-line px-5 py-4 lg:border-b-0 lg:border-r">
|
||||
<span class="flex size-10 items-center justify-center rounded-md bg-brand-soft text-brand">
|
||||
<Cpu size={18} />
|
||||
</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<strong class="block">Wasmeld Runtime</strong>
|
||||
<span class="mt-0.5 block truncate text-xs text-muted">
|
||||
{state().snapshot?.runtime.status === "running"
|
||||
? "Wasmtime sandbox 正常"
|
||||
: "Engine 与 Actor 已释放"}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<Show
|
||||
when={state().snapshot?.runtime.status === "running"}
|
||||
fallback={
|
||||
<button
|
||||
class="icon-btn"
|
||||
title="启动 Runtime"
|
||||
disabled={state().runtimeAction !== null}
|
||||
onClick={() => props.command({ type: "runtime-action", action: "start" })}
|
||||
>
|
||||
<Play size={15} />
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<button
|
||||
class="icon-btn"
|
||||
title="重启 Runtime"
|
||||
disabled={state().runtimeAction !== null}
|
||||
onClick={() => props.command({ type: "runtime-action", action: "restart" })}
|
||||
>
|
||||
<RotateCcw size={15} />
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn text-coral-strong"
|
||||
title="停止 Runtime"
|
||||
disabled={state().runtimeAction !== null}
|
||||
onClick={() => props.command({ type: "runtime-action", action: "stop" })}
|
||||
>
|
||||
<CircleStop size={15} />
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
<RuntimeStat
|
||||
label="已加载版本"
|
||||
value={(state().snapshot?.runtime.registered_services ?? 0).toString()}
|
||||
detail="已编译 Component"
|
||||
/>
|
||||
<RuntimeStat
|
||||
label="活跃 Store"
|
||||
value={(state().snapshot?.runtime.running_services ?? 0).toString()}
|
||||
detail="串行 Actor"
|
||||
/>
|
||||
<RuntimeStat
|
||||
label="运行时间"
|
||||
value={
|
||||
state().snapshot?.runtime.status === "running"
|
||||
? formatDuration(state().snapshot?.runtime.uptime_ms ?? 0)
|
||||
: "—"
|
||||
}
|
||||
detail="当前 Runtime"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<div class="grid gap-5 xl:grid-cols-[minmax(0,1.7fr)_minmax(300px,0.8fr)]">
|
||||
<section class="panel min-w-0">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h2>服务状态</h2>
|
||||
<p>已注册版本及当前 Actor 状态</p>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-secondary h-9"
|
||||
onClick={() => props.command({ type: "navigate", view: "services" })}
|
||||
>
|
||||
查看全部
|
||||
</button>
|
||||
</div>
|
||||
<ServiceTable
|
||||
services={services().slice(0, 5)}
|
||||
state={state()}
|
||||
command={props.command}
|
||||
compact
|
||||
/>
|
||||
</section>
|
||||
|
||||
<aside class="panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h2>最近事件</h2>
|
||||
<p>生命周期与调用结果</p>
|
||||
</div>
|
||||
<span class="inline-flex items-center gap-1.5 text-[11px] font-bold text-brand">
|
||||
<span class="size-1.5 rounded-full bg-brand" />
|
||||
LIVE
|
||||
</span>
|
||||
</div>
|
||||
<div class="divide-y divide-line">
|
||||
<For
|
||||
each={events().slice(0, 6)}
|
||||
fallback={<p class="px-5 py-12 text-center text-sm text-muted">暂无事件</p>}
|
||||
>
|
||||
{(event) => (
|
||||
<div class="px-5 py-3">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<strong class="truncate text-xs">{event.title}</strong>
|
||||
<span class="font-mono text-[10px] text-muted">{event.time}</span>
|
||||
</div>
|
||||
<p class="mt-1 line-clamp-2 text-xs leading-5 text-muted">{event.detail}</p>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Show>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function Metric(props: {
|
||||
icon: JSXElement;
|
||||
tone: string;
|
||||
label: string;
|
||||
value: string;
|
||||
note: string;
|
||||
}) {
|
||||
return (
|
||||
<article class="metric">
|
||||
<div class={`metric-icon ${props.tone}`}>{props.icon}</div>
|
||||
<div class="metric-copy">
|
||||
<span>{props.label}</span>
|
||||
<strong>{props.value}</strong>
|
||||
</div>
|
||||
<small>{props.note}</small>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function RuntimeStat(props: { label: string; value: string; detail: string }) {
|
||||
return (
|
||||
<div class="border-b border-line px-5 py-4 last:border-b-0 lg:border-b-0 lg:border-r lg:last:border-r-0">
|
||||
<span class="block text-xs text-muted">{props.label}</span>
|
||||
<strong class="mt-1 block text-lg">{props.value}</strong>
|
||||
<small class="mt-0.5 block text-[11px] text-muted">{props.detail}</small>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OverviewSkeleton() {
|
||||
return (
|
||||
<div class="space-y-5 py-5">
|
||||
<div class="skeleton-line w-36" />
|
||||
<div class="skeleton-line h-8 w-64" />
|
||||
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
|
||||
<For each={[1, 2, 3, 4]}>{() => <div class="h-24 animate-pulse bg-white" />}</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user