Paul Payne
26f6b1d43c
Every surface hand-mapped deployment kind → lucide icon, so they could (and did) drift. Add KIND_ICONS/kindIcon to lib/labels beside kindLabel, and route KindBadge (→ all detail headers/cards/sections), the Overview tiles, and the program links through it.
88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import { useParams, Link } from "react-router-dom"
|
|
import { Clock } from "lucide-react"
|
|
import { kindIcon } from "@/lib/labels"
|
|
import { useJob } from "@/services/api/hooks"
|
|
import { LogViewer } from "@/components/LogViewer"
|
|
import { DetailHeader } from "@/components/detail/DetailHeader"
|
|
import { ServiceControls } from "@/components/detail/ServiceControls"
|
|
import { SystemdPanel } from "@/components/detail/SystemdPanel"
|
|
import { ConfigPanel } from "@/components/detail/ConfigPanel"
|
|
import { RelatedDeployments } from "@/components/detail/RelatedDeployments"
|
|
|
|
const ProgramIcon = kindIcon("program")
|
|
|
|
export function ScheduledDetailPage() {
|
|
const { name } = useParams<{ name: string }>()
|
|
const { data: deployment, isLoading, error, refetch } = useJob(name ?? "")
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="max-w-3xl mx-auto px-6 py-8 text-[var(--muted)]">Loading...</div>
|
|
)
|
|
}
|
|
|
|
if (error || !deployment) {
|
|
return (
|
|
<div className="max-w-3xl mx-auto px-6 py-8">
|
|
<DetailHeader backTo="/" backLabel="Back" name={name ?? ""} />
|
|
<p className="text-red-400">Scheduled job not found</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto px-6 py-8">
|
|
<DetailHeader
|
|
backTo="/scheduled"
|
|
backLabel="Back to Jobs"
|
|
name={deployment.id}
|
|
kind="job"
|
|
stack={deployment.stack}
|
|
source={deployment.source}
|
|
>
|
|
<ServiceControls name={deployment.id} enabled={deployment.enabled} />
|
|
</DetailHeader>
|
|
|
|
<div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
|
|
<div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
|
|
{deployment.schedule && (
|
|
<>
|
|
<span className="text-[var(--muted)]">Cron</span>
|
|
<span className="flex items-center gap-2 min-w-0 break-all font-mono">
|
|
<Clock size={14} className="shrink-0 text-[var(--muted)]" />
|
|
{deployment.schedule}
|
|
</span>
|
|
</>
|
|
)}
|
|
{deployment.program && (
|
|
<>
|
|
<span className="text-[var(--muted)]">Program</span>
|
|
<Link
|
|
to={`/programs/${deployment.program}`}
|
|
className="flex items-center gap-1.5 min-w-0 text-[var(--primary)] hover:underline"
|
|
>
|
|
<ProgramIcon size={14} className="shrink-0" /> {deployment.program}
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<RelatedDeployments name={deployment.id} />
|
|
|
|
<ConfigPanel deployment={deployment} configSection="jobs" onRefetch={refetch} />
|
|
|
|
{deployment.systemd && (
|
|
<SystemdPanel name={deployment.id} systemd={deployment.systemd} />
|
|
)}
|
|
|
|
{deployment.managed && (
|
|
<div className="mb-6">
|
|
<h2 className="text-lg font-semibold mb-3">Logs</h2>
|
|
<LogViewer name={deployment.id} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|