refactor(app): rename Component* UI widgets to accurate domain names
The dashboard widgets were named after the old 'component' concept. Renamed each to what it actually renders: - ComponentCard → ServiceCard (ServiceSummary, /services/, service actions) - ComponentTable → ProgramTable (ProgramSummary[], the program catalog) - ComponentEditor→ DeploymentEditor (DeploymentDetail, the unified type) - ComponentFields→ DeploymentFields (AnyDetail) - AddComponent → AddDeployment Also purged the domain term 'component' from the rest of the app: the useComponent hook → useDeployment, ConfigPanel + the three detail pages' `component` prop/var → `deployment`, and the gateway/node table headers (Component → Program / Deployment). Props renamed to match (component → service / program / deployment). The React UI directory app/src/components/ keeps its conventional name. App type-checks and builds clean.
This commit is contained in:
@@ -4,8 +4,8 @@ import { ArrowLeft, Check, Loader2, Zap } from "lucide-react"
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { apiClient } from "@/services/api/client"
|
||||
import type { DeploymentDetail } from "@/types"
|
||||
import { AddComponent } from "@/components/AddComponent"
|
||||
import { ComponentEditor } from "@/components/ComponentEditor"
|
||||
import { AddDeployment } from "@/components/AddDeployment"
|
||||
import { DeploymentEditor } from "@/components/DeploymentEditor"
|
||||
|
||||
interface ApplyResult {
|
||||
ok: boolean
|
||||
@@ -124,18 +124,18 @@ export function ConfigEditorPage() {
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-[var(--muted)]">Loading components...</p>
|
||||
<p className="text-[var(--muted)]">Loading entries...</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{components?.map((comp) => (
|
||||
<ComponentEditor
|
||||
<DeploymentEditor
|
||||
key={comp.id}
|
||||
component={comp}
|
||||
deployment={comp}
|
||||
onSave={handleSave}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
))}
|
||||
<AddComponent
|
||||
<AddDeployment
|
||||
existingNames={components?.map((c) => c.id) ?? []}
|
||||
onAdd={handleSave}
|
||||
/>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { MeshPanel } from "@/components/MeshPanel"
|
||||
import { NodeBar } from "@/components/NodeBar"
|
||||
import { ServiceSection } from "@/components/ServiceSection"
|
||||
import { ScheduledSection } from "@/components/ScheduledSection"
|
||||
import { ComponentTable } from "@/components/ComponentTable"
|
||||
import { ProgramTable } from "@/components/ProgramTable"
|
||||
import { SectionHeader } from "@/components/SectionHeader"
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@ export function Dashboard() {
|
||||
{programs && programs.length > 0 && (
|
||||
<section>
|
||||
<SectionHeader section="program" />
|
||||
<ComponentTable components={programs} />
|
||||
<ProgramTable programs={programs} />
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,7 @@ export function NodeDetailPage() {
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-[var(--card)] border-b border-[var(--border)] text-left">
|
||||
<th className="px-3 py-2 font-medium text-[var(--muted)]">Component</th>
|
||||
<th className="px-3 py-2 font-medium text-[var(--muted)]">Deployment</th>
|
||||
<th className="px-3 py-2 font-medium text-[var(--muted)]">Behavior</th>
|
||||
<th className="px-3 py-2 font-medium text-[var(--muted)]">Stack</th>
|
||||
<th className="px-3 py-2 font-medium text-[var(--muted)]">Runner</th>
|
||||
|
||||
@@ -9,7 +9,7 @@ import { ProgramActions, ActionOutputPanel, type ActionOutput } from "@/componen
|
||||
export function ProgramDetailPage() {
|
||||
useEventStream()
|
||||
const { name } = useParams<{ name: string }>()
|
||||
const { data: component, isLoading, error, refetch } = useProgram(name ?? "")
|
||||
const { data: deployment, isLoading, error, refetch } = useProgram(name ?? "")
|
||||
const [actionOutput, setActionOutput] = useState<ActionOutput | null>(null)
|
||||
|
||||
if (isLoading) {
|
||||
@@ -18,7 +18,7 @@ export function ProgramDetailPage() {
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !component) {
|
||||
if (error || !deployment) {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-6 py-8">
|
||||
<DetailHeader backTo="/" backLabel="Back" name={name ?? ""} />
|
||||
@@ -32,12 +32,12 @@ export function ProgramDetailPage() {
|
||||
<DetailHeader
|
||||
backTo="/"
|
||||
backLabel="Back to Programs"
|
||||
name={component.id}
|
||||
behavior={component.behavior}
|
||||
stack={component.stack}
|
||||
source={component.source}
|
||||
name={deployment.id}
|
||||
behavior={deployment.behavior}
|
||||
stack={deployment.stack}
|
||||
source={deployment.source}
|
||||
>
|
||||
<ProgramActions name={component.id} actions={component.actions} installed={component.installed} onOutput={setActionOutput} />
|
||||
<ProgramActions name={deployment.id} actions={deployment.actions} installed={deployment.installed} onOutput={setActionOutput} />
|
||||
</DetailHeader>
|
||||
|
||||
{actionOutput && actionOutput.action && (
|
||||
@@ -46,8 +46,8 @@ export function ProgramDetailPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{component.description && (
|
||||
<p className="text-sm text-[var(--muted)] -mt-4 mb-6">{component.description}</p>
|
||||
{deployment.description && (
|
||||
<p className="text-sm text-[var(--muted)] -mt-4 mb-6">{deployment.description}</p>
|
||||
)}
|
||||
|
||||
<div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
|
||||
@@ -58,48 +58,48 @@ export function ProgramDetailPage() {
|
||||
Where the source lives and how castle works with it.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm mb-4">
|
||||
{component.source && (
|
||||
{deployment.source && (
|
||||
<>
|
||||
<span className="text-[var(--muted)]">Source</span>
|
||||
<span className="font-mono break-all">{component.source}</span>
|
||||
<span className="font-mono break-all">{deployment.source}</span>
|
||||
</>
|
||||
)}
|
||||
{component.repo && (
|
||||
{deployment.repo && (
|
||||
<>
|
||||
<span className="text-[var(--muted)]">Repo</span>
|
||||
<span className="font-mono break-all">
|
||||
{component.repo}
|
||||
{component.ref ? ` @ ${component.ref}` : ""}
|
||||
{deployment.repo}
|
||||
{deployment.ref ? ` @ ${deployment.ref}` : ""}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{component.version && (
|
||||
{deployment.version && (
|
||||
<>
|
||||
<span className="text-[var(--muted)]">Version</span>
|
||||
<span>{component.version}</span>
|
||||
<span>{deployment.version}</span>
|
||||
</>
|
||||
)}
|
||||
{component.runner && (
|
||||
{deployment.runner && (
|
||||
<>
|
||||
<span className="text-[var(--muted)]">Runner</span>
|
||||
<span>{runnerLabel(component.runner)}</span>
|
||||
<span>{runnerLabel(deployment.runner)}</span>
|
||||
</>
|
||||
)}
|
||||
{component.active !== null && (
|
||||
{deployment.active !== null && (
|
||||
<>
|
||||
<span className="text-[var(--muted)]">Active</span>
|
||||
<span className={component.active ? "text-green-400" : "text-[var(--muted)]"}>
|
||||
{component.active ? "● active" : "○ inactive"}
|
||||
<span className={deployment.active ? "text-green-400" : "text-[var(--muted)]"}>
|
||||
{deployment.active ? "● active" : "○ inactive"}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{component.commands && Object.keys(component.commands).length > 0 && (
|
||||
{deployment.commands && Object.keys(deployment.commands).length > 0 && (
|
||||
<div className="mb-4">
|
||||
<span className="text-sm text-[var(--muted)] block mb-1">Commands</span>
|
||||
<div className="space-y-1">
|
||||
{Object.entries(component.commands).map(([verb, cmds]) => (
|
||||
{Object.entries(deployment.commands).map(([verb, cmds]) => (
|
||||
<div key={verb} className="flex gap-2 text-xs">
|
||||
<span className="text-[var(--muted)] w-20 shrink-0">{verb}</span>
|
||||
<span className="font-mono break-all">
|
||||
@@ -111,11 +111,11 @@ export function ProgramDetailPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{component.system_dependencies.length > 0 && (
|
||||
{deployment.system_dependencies.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<span className="text-sm text-[var(--muted)] block mb-1">System Dependencies</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{component.system_dependencies.map((dep) => (
|
||||
{deployment.system_dependencies.map((dep) => (
|
||||
<span
|
||||
key={dep}
|
||||
className="text-xs px-2 py-0.5 rounded bg-amber-900/30 text-amber-400 border border-amber-800"
|
||||
@@ -128,7 +128,7 @@ export function ProgramDetailPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ConfigPanel component={component} configSection="programs" onRefetch={refetch} />
|
||||
<ConfigPanel deployment={deployment} configSection="programs" onRefetch={refetch} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { useParams, Navigate } from "react-router-dom"
|
||||
import { useComponent } from "@/services/api/hooks"
|
||||
import { useDeployment } from "@/services/api/hooks"
|
||||
|
||||
export function ProgramRedirect() {
|
||||
const { name } = useParams<{ name: string }>()
|
||||
const { data: component, isLoading, error } = useComponent(name ?? "")
|
||||
const { data: deployment, isLoading, error } = useDeployment(name ?? "")
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
@@ -11,15 +11,15 @@ export function ProgramRedirect() {
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !component) {
|
||||
if (error || !deployment) {
|
||||
return <Navigate to={`/programs/${name}`} replace />
|
||||
}
|
||||
|
||||
if (component.managed && !component.schedule) {
|
||||
if (deployment.managed && !deployment.schedule) {
|
||||
return <Navigate to={`/services/${name}`} replace />
|
||||
}
|
||||
|
||||
if (component.managed && component.schedule) {
|
||||
if (deployment.managed && deployment.schedule) {
|
||||
return <Navigate to={`/jobs/${name}`} replace />
|
||||
}
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ export function ScheduledDetailPage() {
|
||||
useEventStream()
|
||||
const logRef = useRef<LogViewerHandle>(null)
|
||||
const { name } = useParams<{ name: string }>()
|
||||
const { data: component, isLoading, error, refetch } = useJob(name ?? "")
|
||||
const { data: deployment, isLoading, error, refetch } = useJob(name ?? "")
|
||||
const { data: statusResp } = useStatus()
|
||||
const health = statusResp?.statuses.find((s) => s.id === name)
|
||||
|
||||
@@ -22,7 +22,7 @@ export function ScheduledDetailPage() {
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !component) {
|
||||
if (error || !deployment) {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-6 py-8">
|
||||
<DetailHeader backTo="/" backLabel="Back" name={name ?? ""} />
|
||||
@@ -36,14 +36,14 @@ export function ScheduledDetailPage() {
|
||||
<DetailHeader
|
||||
backTo="/"
|
||||
backLabel="Back to Jobs"
|
||||
name={component.id}
|
||||
stack={component.stack}
|
||||
source={component.source}
|
||||
name={deployment.id}
|
||||
stack={deployment.stack}
|
||||
source={deployment.source}
|
||||
>
|
||||
<ServiceControls name={component.id} health={health} />
|
||||
<ServiceControls name={deployment.id} health={health} />
|
||||
</DetailHeader>
|
||||
|
||||
{component.schedule && (
|
||||
{deployment.schedule && (
|
||||
<div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
|
||||
<h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider mb-3">
|
||||
Schedule
|
||||
@@ -52,13 +52,13 @@ export function ScheduledDetailPage() {
|
||||
<span className="text-[var(--muted)]">Cron</span>
|
||||
<span className="flex items-center gap-2 font-mono">
|
||||
<Clock size={14} className="text-[var(--muted)]" />
|
||||
{component.schedule}
|
||||
{deployment.schedule}
|
||||
</span>
|
||||
{component.systemd && (
|
||||
{deployment.systemd && (
|
||||
<>
|
||||
<span className="text-[var(--muted)]">Timer unit</span>
|
||||
<span className="font-mono">
|
||||
{component.systemd.unit_name.replace(".service", ".timer")}
|
||||
{deployment.systemd.unit_name.replace(".service", ".timer")}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
@@ -66,13 +66,13 @@ export function ScheduledDetailPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{component.systemd && (
|
||||
<SystemdPanel name={component.id} systemd={component.systemd} />
|
||||
{deployment.systemd && (
|
||||
<SystemdPanel name={deployment.id} systemd={deployment.systemd} />
|
||||
)}
|
||||
|
||||
<ConfigPanel component={component} configSection="jobs" onRefetch={refetch} />
|
||||
<ConfigPanel deployment={deployment} configSection="jobs" onRefetch={refetch} />
|
||||
|
||||
{component.managed && (
|
||||
{deployment.managed && (
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-lg font-semibold">Logs</h2>
|
||||
@@ -83,7 +83,7 @@ export function ScheduledDetailPage() {
|
||||
<Trash2 size={14} /> Clear
|
||||
</button>
|
||||
</div>
|
||||
<LogViewer ref={logRef} name={component.id} />
|
||||
<LogViewer ref={logRef} name={deployment.id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@ export function ServiceDetailPage() {
|
||||
useEventStream()
|
||||
const logRef = useRef<LogViewerHandle>(null)
|
||||
const { name } = useParams<{ name: string }>()
|
||||
const { data: component, isLoading, error, refetch } = useService(name ?? "")
|
||||
const { data: deployment, isLoading, error, refetch } = useService(name ?? "")
|
||||
const { data: statusResp } = useStatus()
|
||||
const health = statusResp?.statuses.find((s) => s.id === name)
|
||||
const isGateway = name === "castle-gateway"
|
||||
@@ -26,7 +26,7 @@ export function ServiceDetailPage() {
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !component) {
|
||||
if (error || !deployment) {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-6 py-8">
|
||||
<DetailHeader backTo="/" backLabel="Back" name={name ?? ""} />
|
||||
@@ -35,21 +35,21 @@ export function ServiceDetailPage() {
|
||||
)
|
||||
}
|
||||
|
||||
const runner = (component.manifest.run as Record<string, unknown>)?.runner as string | undefined
|
||||
const runner = (deployment.manifest.run as Record<string, unknown>)?.runner as string | undefined
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-6 py-8">
|
||||
<DetailHeader
|
||||
backTo="/"
|
||||
backLabel="Back to Services"
|
||||
name={component.id}
|
||||
name={deployment.id}
|
||||
behavior="daemon"
|
||||
stack={component.stack}
|
||||
source={component.source}
|
||||
stack={deployment.stack}
|
||||
source={deployment.source}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{health && <HealthBadge status={health.status} latency={health.latency_ms} />}
|
||||
<ServiceControls name={component.id} health={health} />
|
||||
<ServiceControls name={deployment.id} health={health} />
|
||||
</div>
|
||||
</DetailHeader>
|
||||
|
||||
@@ -58,28 +58,28 @@ export function ServiceDetailPage() {
|
||||
Overview
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
|
||||
{component.port && (
|
||||
{deployment.port && (
|
||||
<>
|
||||
<span className="text-[var(--muted)]">Port</span>
|
||||
<span className="flex items-center gap-1 font-mono">
|
||||
<Server size={12} />:{component.port}
|
||||
<Server size={12} />:{deployment.port}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{component.health_path && (
|
||||
{deployment.health_path && (
|
||||
<>
|
||||
<span className="text-[var(--muted)]">Health</span>
|
||||
<span className="font-mono">{component.health_path}</span>
|
||||
<span className="font-mono">{deployment.health_path}</span>
|
||||
</>
|
||||
)}
|
||||
{component.proxy_path && (
|
||||
{deployment.proxy_path && (
|
||||
<>
|
||||
<span className="text-[var(--muted)]">Proxy</span>
|
||||
<a
|
||||
href={component.proxy_path + "/"}
|
||||
href={deployment.proxy_path + "/"}
|
||||
className="flex items-center gap-1 text-[var(--primary)] hover:underline font-mono"
|
||||
>
|
||||
<ExternalLink size={12} />{component.proxy_path}
|
||||
<ExternalLink size={12} />{deployment.proxy_path}
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
@@ -89,17 +89,17 @@ export function ServiceDetailPage() {
|
||||
<span className="flex items-center gap-1">
|
||||
<Terminal size={12} />
|
||||
{runnerLabel(runner)}
|
||||
{(component.manifest.run as Record<string, string>)?.program && (
|
||||
<> · {(component.manifest.run as Record<string, string>).program}</>
|
||||
{(deployment.manifest.run as Record<string, string>)?.program && (
|
||||
<> · {(deployment.manifest.run as Record<string, string>).program}</>
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{component.port && (
|
||||
{deployment.port && (
|
||||
<>
|
||||
<span className="text-[var(--muted)]">Docs</span>
|
||||
<a
|
||||
href={`http://localhost:${component.port}/docs`}
|
||||
href={`http://localhost:${deployment.port}/docs`}
|
||||
className="text-[var(--primary)] hover:underline"
|
||||
>
|
||||
OpenAPI docs
|
||||
@@ -109,8 +109,8 @@ export function ServiceDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{component.systemd && (
|
||||
<SystemdPanel name={component.id} systemd={component.systemd} />
|
||||
{deployment.systemd && (
|
||||
<SystemdPanel name={deployment.id} systemd={deployment.systemd} />
|
||||
)}
|
||||
|
||||
{isGateway && caddyfile?.content && (
|
||||
@@ -127,9 +127,9 @@ export function ServiceDetailPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ConfigPanel component={component} configSection="services" onRefetch={refetch} />
|
||||
<ConfigPanel deployment={deployment} configSection="services" onRefetch={refetch} />
|
||||
|
||||
{component.managed && (
|
||||
{deployment.managed && (
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-lg font-semibold">Logs</h2>
|
||||
@@ -140,7 +140,7 @@ export function ServiceDetailPage() {
|
||||
<Trash2 size={14} /> Clear
|
||||
</button>
|
||||
</div>
|
||||
<LogViewer ref={logRef} name={component.id} />
|
||||
<LogViewer ref={logRef} name={deployment.id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user