Dashboard: Deployments nav group, tool detail page, deployment links, static-aware detail
- Nav: Services/Scheduled/Tools nested under a 'Deployments' group (expandable; flattened to icons when the sidebar is collapsed). Programs stays top-level. - Overview: Tools tile (Wrench, count of tool programs). - New /tools/:name tool detail page (useDeployment): Install/Uninstall lifecycle, a link up to its program, and an editable ToolFields (description + env). - ServiceDetail is static-aware: a caddy deployment shows served-by-gateway + URL + root, no start/stop, and edits via a new StaticFields (root + public + env) so a launcher is never injected into a caddy deployment. - Program detail's Deployment section is now a clean list of links — every deployment (tool→/tools, service/static→/services, job→/jobs) links to its detail page; lifecycle controls moved onto those pages. clean pnpm build + tsc.
This commit is contained in:
@@ -3,14 +3,22 @@ import { useNavigate } from "react-router-dom"
|
||||
import { useQueryClient } from "@tanstack/react-query"
|
||||
import { Check, RefreshCw } from "lucide-react"
|
||||
import { apiClient } from "@/services/api/client"
|
||||
import type { AnyDetail, ProgramDetail, ServiceDetail, JobDetail } from "@/types"
|
||||
import type {
|
||||
AnyDetail,
|
||||
DeploymentDetail,
|
||||
ProgramDetail,
|
||||
ServiceDetail,
|
||||
JobDetail,
|
||||
} from "@/types"
|
||||
import { ProgramFields } from "./ProgramFields"
|
||||
import { ServiceFields } from "./ServiceFields"
|
||||
import { JobFields } from "./JobFields"
|
||||
import { ToolFields } from "./ToolFields"
|
||||
import { StaticFields } from "./StaticFields"
|
||||
|
||||
interface ConfigPanelProps {
|
||||
deployment: AnyDetail
|
||||
configSection: "services" | "jobs" | "programs"
|
||||
deployment: AnyDetail | DeploymentDetail
|
||||
configSection: "services" | "jobs" | "programs" | "tools" | "static"
|
||||
onRefetch: () => void
|
||||
}
|
||||
|
||||
@@ -139,6 +147,18 @@ export function ConfigPanel({ deployment, configSection, onRefetch }: ConfigPane
|
||||
onSave={handleSave}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
) : configSection === "tools" ? (
|
||||
<ToolFields
|
||||
tool={deployment as DeploymentDetail}
|
||||
onSave={handleSave}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
) : configSection === "static" ? (
|
||||
<StaticFields
|
||||
static_={deployment as DeploymentDetail}
|
||||
onSave={handleSave}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
) : (
|
||||
<JobFields
|
||||
job={deployment as JobDetail}
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
import { useState } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
import { Server, Clock, Plus, Loader2, ExternalLink } from "lucide-react"
|
||||
import { Plus, ChevronRight } from "lucide-react"
|
||||
import type { ProgramDetail } from "@/types"
|
||||
import { useServices, useJobs, useProgramAction } from "@/services/api/hooks"
|
||||
import { subdomainUrl } from "@/lib/labels"
|
||||
import { useServices, useJobs } from "@/services/api/hooks"
|
||||
import { KindBadge } from "@/components/KindBadge"
|
||||
import { CreateDeploymentForm, type CreatePrefill } from "./CreateDeploymentForm"
|
||||
|
||||
/** How a program is deployed, and its lifecycle. A program → 0-N deployments.
|
||||
* Its own path (tool) / caddy (static) deployment is 1:1 with the program, so its
|
||||
* lifecycle is shown inline here; service/job deployments link to their own pages
|
||||
* where start/stop lives. This is the single home for "how this program runs". */
|
||||
/** How a program is deployed. A program → 0-N deployments; each row links to its
|
||||
* detail page (where its config + lifecycle live). tool → /tools, static/service
|
||||
* → /services, job → /jobs. */
|
||||
export function DeploymentsSection({ program }: { program: ProgramDetail }) {
|
||||
const { deployments } = program
|
||||
const [creating, setCreating] = useState(false)
|
||||
@@ -28,16 +27,14 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
|
||||
launcher: program.stack?.startsWith("python") || !program.stack ? "python" : "command",
|
||||
}
|
||||
|
||||
// Tool/static deployments are 1:1 with the program (same name) — their
|
||||
// lifecycle is shown inline; service/job deployments link to their own pages.
|
||||
const inline = deployments.filter((d) => d.kind === "tool" || d.kind === "static")
|
||||
const linked = deployments.filter((d) => d.kind === "service" || d.kind === "job")
|
||||
const detailPath = (name: string, kind: string) =>
|
||||
kind === "tool" ? `/tools/${name}` : kind === "job" ? `/jobs/${name}` : `/services/${name}`
|
||||
|
||||
return (
|
||||
<div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider">
|
||||
Deployment
|
||||
Deployments
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setCreating((c) => !c)}
|
||||
@@ -50,15 +47,6 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
|
||||
How this program is materialized into the runtime.
|
||||
</p>
|
||||
|
||||
{/* The program's own path/caddy deployment — its lifecycle, inline. */}
|
||||
{inline.map((d) =>
|
||||
d.kind === "tool" ? (
|
||||
<PathLifecycle key={d.name} name={program.id} active={program.active} />
|
||||
) : (
|
||||
<StaticStatus key={d.name} name={program.id} active={program.active} />
|
||||
),
|
||||
)}
|
||||
|
||||
{creating && (
|
||||
<CreateDeploymentForm
|
||||
prefill={prefill}
|
||||
@@ -67,90 +55,25 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Service/job deployments — managed on their own detail pages. */}
|
||||
{deployments.length === 0 && !creating ? (
|
||||
<p className="text-sm text-[var(--muted)]">No deployment yet.</p>
|
||||
) : linked.length > 0 ? (
|
||||
<div className="space-y-1.5 mt-1">
|
||||
{linked.map((d) => (
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{deployments.map((d) => (
|
||||
<Link
|
||||
key={d.name}
|
||||
to={d.kind === "job" ? `/jobs/${d.name}` : `/services/${d.name}`}
|
||||
className="flex items-center gap-2 text-sm hover:text-[var(--primary)] transition-colors"
|
||||
to={detailPath(d.name, d.kind)}
|
||||
className="flex items-center gap-2 rounded px-2 py-1.5 -mx-2 text-sm hover:bg-black/20 transition-colors group"
|
||||
>
|
||||
{d.kind === "job" ? (
|
||||
<Clock size={14} className="text-[var(--muted)]" />
|
||||
) : (
|
||||
<Server size={14} className="text-[var(--muted)]" />
|
||||
)}
|
||||
<span className="font-medium">{d.name}</span>
|
||||
<span className="text-xs text-[var(--muted)]">{d.kind}</span>
|
||||
<span className="font-mono">{d.name}</span>
|
||||
<KindBadge kind={d.kind} />
|
||||
<ChevronRight
|
||||
size={14}
|
||||
className="ml-auto text-[var(--muted)] group-hover:text-[var(--primary)]"
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Dot({ active }: { active: boolean | null }) {
|
||||
const cls =
|
||||
active === true
|
||||
? "bg-green-500"
|
||||
: active === false
|
||||
? "bg-[var(--muted)]"
|
||||
: "bg-transparent border border-[var(--muted)]"
|
||||
return <span className={`h-2 w-2 rounded-full shrink-0 ${cls}`} />
|
||||
}
|
||||
|
||||
/** A tool's PATH deployment: install/uninstall is its start/stop (manager=path). */
|
||||
function PathLifecycle({ name, active }: { name: string; active: boolean | null }) {
|
||||
const { mutate, isPending } = useProgramAction()
|
||||
const installed = active === true
|
||||
return (
|
||||
<div className="flex items-center justify-between rounded border border-[var(--border)] px-3 py-2 mb-3">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Dot active={active} />
|
||||
<span>{installed ? "Installed on PATH" : "Not installed"}</span>
|
||||
<span className="text-xs text-[var(--muted)]">manager: path</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => mutate({ name, action: installed ? "uninstall" : "install" })}
|
||||
disabled={isPending}
|
||||
className={`flex items-center gap-1.5 px-2 py-1 text-sm rounded border transition-colors disabled:opacity-40 ${
|
||||
installed
|
||||
? "border-red-800 text-red-400 hover:bg-red-800/30"
|
||||
: "border-green-800 text-green-400 hover:bg-green-800/30"
|
||||
}`}
|
||||
>
|
||||
{isPending && <Loader2 size={14} className="animate-spin" />}
|
||||
{installed ? "Uninstall" : "Install"}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** A static (caddy) deployment: served by the gateway from its built dir. */
|
||||
function StaticStatus({ name, active }: { name: string; active: boolean | null }) {
|
||||
const url = subdomainUrl(name)
|
||||
const served = active === true
|
||||
return (
|
||||
<div className="flex items-center justify-between rounded border border-[var(--border)] px-3 py-2 mb-3">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Dot active={active} />
|
||||
<span>{served ? "Served by the gateway" : "Not built yet"}</span>
|
||||
<span className="text-xs text-[var(--muted)]">manager: caddy</span>
|
||||
</div>
|
||||
{url && served && (
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-sm text-[var(--primary)] hover:underline"
|
||||
>
|
||||
{name}
|
||||
<ExternalLink size={11} className="opacity-60" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
86
app/src/components/detail/StaticFields.tsx
Normal file
86
app/src/components/detail/StaticFields.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import { useState } from "react"
|
||||
import type { DeploymentDetail } from "@/types"
|
||||
import { Field, TextField, FormFooter, useEnvSecrets } from "./fields"
|
||||
|
||||
interface Props {
|
||||
static_: DeploymentDetail
|
||||
onSave: (name: string, config: Record<string, unknown>) => Promise<void>
|
||||
onDelete?: (name: string) => Promise<void>
|
||||
}
|
||||
|
||||
type Obj = Record<string, unknown>
|
||||
const obj = (v: unknown): Obj => (v as Obj) ?? {}
|
||||
|
||||
/** Edit a static (caddy) deployment: the built dir it serves (`root`), whether it's
|
||||
* also public (via the tunnel), a description, and env. No launcher/port/schedule. */
|
||||
export function StaticFields({ static_: dep, onSave, onDelete }: Props) {
|
||||
const m = dep.manifest
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [saved, setSaved] = useState(false)
|
||||
const [description, setDescription] = useState((m.description as string) ?? "")
|
||||
const [root, setRoot] = useState((m.root as string) ?? "dist")
|
||||
const [isPublic, setIsPublic] = useState(m.public === true)
|
||||
const { element: envEditor, merged } = useEnvSecrets(
|
||||
obj(obj(m.defaults).env) as Record<string, string>,
|
||||
)
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true)
|
||||
setSaved(false)
|
||||
try {
|
||||
const config: Record<string, unknown> = JSON.parse(JSON.stringify(m))
|
||||
delete config.id
|
||||
config.description = description || undefined
|
||||
config.root = root || "dist"
|
||||
if (isPublic) config.public = true
|
||||
else delete config.public
|
||||
const env = merged()
|
||||
if (Object.keys(env).length > 0) config.defaults = { ...obj(config.defaults), env }
|
||||
else if (config.defaults) delete (config.defaults as Obj).env
|
||||
await onSave(dep.id, config)
|
||||
setSaved(true)
|
||||
setTimeout(() => setSaved(false), 2000)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<TextField label="Description" value={description} onChange={setDescription} />
|
||||
<TextField
|
||||
label="Root"
|
||||
value={root}
|
||||
onChange={setRoot}
|
||||
mono
|
||||
width="w-48"
|
||||
placeholder="dist"
|
||||
hint="The built directory the gateway serves, relative to the program source (e.g. dist, public)."
|
||||
/>
|
||||
<Field
|
||||
label="Public"
|
||||
hint="Also expose this site to the public internet via the Cloudflare tunnel."
|
||||
>
|
||||
<label className="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isPublic}
|
||||
onChange={(e) => setIsPublic(e.target.checked)}
|
||||
/>
|
||||
<span className="font-mono text-[var(--muted)]">
|
||||
{isPublic ? "public (via tunnel)" : "internal only"}
|
||||
</span>
|
||||
</label>
|
||||
</Field>
|
||||
{envEditor}
|
||||
<FormFooter
|
||||
saving={saving}
|
||||
saved={saved}
|
||||
onSave={handleSave}
|
||||
onDelete={onDelete ? () => onDelete(dep.id) : undefined}
|
||||
deleteLabel="Remove static deployment"
|
||||
confirmMessage={`Remove the static deployment "${dep.id}"? Its gateway route is dropped on the next deploy. (The program stays.)`}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
57
app/src/components/detail/ToolFields.tsx
Normal file
57
app/src/components/detail/ToolFields.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { useState } from "react"
|
||||
import type { DeploymentDetail } from "@/types"
|
||||
import { TextField, FormFooter, useEnvSecrets } from "./fields"
|
||||
|
||||
interface Props {
|
||||
tool: DeploymentDetail
|
||||
onSave: (name: string, config: Record<string, unknown>) => Promise<void>
|
||||
onDelete?: (name: string) => Promise<void>
|
||||
}
|
||||
|
||||
type Obj = Record<string, unknown>
|
||||
const obj = (v: unknown): Obj => (v as Obj) ?? {}
|
||||
|
||||
/** Edit a tool's (path) deployment config. A path deployment has no launcher,
|
||||
* port, or schedule — only a description and env, plus its manager. */
|
||||
export function ToolFields({ tool, onSave, onDelete }: Props) {
|
||||
const m = tool.manifest
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [saved, setSaved] = useState(false)
|
||||
const [description, setDescription] = useState((m.description as string) ?? "")
|
||||
const { element: envEditor, merged } = useEnvSecrets(
|
||||
obj(obj(m.defaults).env) as Record<string, string>,
|
||||
)
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true)
|
||||
setSaved(false)
|
||||
try {
|
||||
const config: Record<string, unknown> = JSON.parse(JSON.stringify(m))
|
||||
delete config.id
|
||||
config.description = description || undefined
|
||||
const env = merged()
|
||||
if (Object.keys(env).length > 0) config.defaults = { ...obj(config.defaults), env }
|
||||
else if (config.defaults) delete (config.defaults as Obj).env
|
||||
await onSave(tool.id, config)
|
||||
setSaved(true)
|
||||
setTimeout(() => setSaved(false), 2000)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<TextField label="Description" value={description} onChange={setDescription} />
|
||||
{envEditor}
|
||||
<FormFooter
|
||||
saving={saving}
|
||||
saved={saved}
|
||||
onSave={handleSave}
|
||||
onDelete={onDelete ? () => onDelete(tool.id) : undefined}
|
||||
deleteLabel="Remove tool deployment"
|
||||
confirmMessage={`Remove the tool deployment "${tool.id}"? It will be uninstalled from PATH on the next deploy. (The program stays.)`}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user