mirror of
https://github.com/MeshEnvy/mesh-forge.git
synced 2026-08-06 08:53:08 +02:00
refactor: enhance build management by improving status handling, adding human-readable status formatting, and optimizing build detail display
This commit is contained in:
Ben Allfree
+122
-126
@@ -1,147 +1,143 @@
|
||||
import { useMutation, useQuery } from "convex/react";
|
||||
import {
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Loader2,
|
||||
RotateCw,
|
||||
Trash2,
|
||||
XCircle,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Loader2,
|
||||
RotateCw,
|
||||
Trash2,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { timeAgo } from "@/lib/utils";
|
||||
import { humanizeStatus, timeAgo } from "@/lib/utils";
|
||||
import { api } from "../../convex/_generated/api";
|
||||
import type { Id } from "../../convex/_generated/dataModel";
|
||||
|
||||
interface BuildsPanelProps {
|
||||
profileId: Id<"profiles">;
|
||||
profileId: Id<"profiles">;
|
||||
}
|
||||
|
||||
export default function BuildsPanel({ profileId }: BuildsPanelProps) {
|
||||
const builds = useQuery(api.builds.listByProfile, { profileId });
|
||||
const deleteBuild = useMutation(api.builds.deleteBuild);
|
||||
const retryBuild = useMutation(api.builds.retryBuild);
|
||||
const builds = useQuery(api.builds.listByProfile, { profileId });
|
||||
const deleteBuild = useMutation(api.builds.deleteBuild);
|
||||
const retryBuild = useMutation(api.builds.retryBuild);
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case "success":
|
||||
return <CheckCircle className="w-4 h-4 text-green-500" />;
|
||||
case "failure":
|
||||
return <XCircle className="w-4 h-4 text-red-500" />;
|
||||
case "in_progress":
|
||||
return <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />;
|
||||
default:
|
||||
return <Clock className="w-4 h-4 text-yellow-500" />;
|
||||
}
|
||||
};
|
||||
const getStatusIcon = (status: string) => {
|
||||
if (status === "success") {
|
||||
return <CheckCircle className="w-4 h-4 text-green-500" />;
|
||||
}
|
||||
if (status === "failure") {
|
||||
return <XCircle className="w-4 h-4 text-red-500" />;
|
||||
}
|
||||
// All other statuses show as in progress
|
||||
return <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />;
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "success":
|
||||
return "text-green-400";
|
||||
case "failure":
|
||||
return "text-red-400";
|
||||
case "in_progress":
|
||||
return "text-blue-400";
|
||||
default:
|
||||
return "text-yellow-400";
|
||||
}
|
||||
};
|
||||
const getStatusColor = (status: string) => {
|
||||
if (status === "success") {
|
||||
return "text-green-400";
|
||||
}
|
||||
if (status === "failure") {
|
||||
return "text-red-400";
|
||||
}
|
||||
// All other statuses show as in progress
|
||||
return "text-blue-400";
|
||||
};
|
||||
|
||||
const handleDelete = async (buildId: Id<"builds">) => {
|
||||
try {
|
||||
await deleteBuild({ buildId });
|
||||
toast.success("Build deleted", {
|
||||
description: "Build record has been removed.",
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error("Delete failed", {
|
||||
description: String(error),
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleDelete = async (buildId: Id<"builds">) => {
|
||||
try {
|
||||
await deleteBuild({ buildId });
|
||||
toast.success("Build deleted", {
|
||||
description: "Build record has been removed.",
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error("Delete failed", {
|
||||
description: String(error),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleRetry = async (buildId: Id<"builds">) => {
|
||||
try {
|
||||
await retryBuild({ buildId });
|
||||
toast.success("Build retrying", {
|
||||
description: "Build has been queued again.",
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error("Retry failed", {
|
||||
description: String(error),
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleRetry = async (buildId: Id<"builds">) => {
|
||||
try {
|
||||
await retryBuild({ buildId });
|
||||
toast.success("Build retrying", {
|
||||
description: "Build has been queued again.",
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error("Retry failed", {
|
||||
description: String(error),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (!builds || builds.length === 0) {
|
||||
return (
|
||||
<div className="text-slate-500 text-sm py-4">
|
||||
No builds yet. Click "Build" to start.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (!builds || builds.length === 0) {
|
||||
return (
|
||||
<div className="text-slate-500 text-sm py-4">
|
||||
No builds yet. Click "Build" to start.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-semibold mb-3">Build Status</h3>
|
||||
<div className="space-y-1">
|
||||
{builds.map((build) => (
|
||||
<div
|
||||
key={build._id}
|
||||
className="group flex items-center justify-between p-2 rounded-md hover:bg-slate-800/50 transition-colors border border-transparent hover:border-slate-800"
|
||||
>
|
||||
<Link
|
||||
to={`/builds/${build._id}`}
|
||||
className="flex items-center gap-3 flex-1 min-w-0"
|
||||
>
|
||||
{getStatusIcon(build.status)}
|
||||
<span className="font-medium text-sm truncate min-w-[100px]">
|
||||
{build.target}
|
||||
</span>
|
||||
<span className={`text-xs ${getStatusColor(build.status)}`}>
|
||||
{build.status}
|
||||
</span>
|
||||
<span
|
||||
className="text-xs text-slate-500 ml-auto mr-4 whitespace-nowrap"
|
||||
title={new Date(build.startedAt).toLocaleString()}
|
||||
>
|
||||
{timeAgo(build.startedAt)}
|
||||
</span>
|
||||
</Link>
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-semibold mb-3">Build Status</h3>
|
||||
<div className="space-y-1">
|
||||
{builds.map((build) => (
|
||||
<div
|
||||
key={build._id}
|
||||
className="group flex items-center justify-between p-2 rounded-md hover:bg-slate-800/50 transition-colors border border-transparent hover:border-slate-800"
|
||||
>
|
||||
<Link
|
||||
to={`/builds/${build._id}`}
|
||||
className="flex items-center gap-3 flex-1 min-w-0"
|
||||
>
|
||||
{getStatusIcon(build.status)}
|
||||
<span className="font-medium text-sm truncate min-w-[100px]">
|
||||
{build.target}
|
||||
</span>
|
||||
<span className={`text-xs ${getStatusColor(build.status)}`}>
|
||||
{humanizeStatus(build.status)}
|
||||
</span>
|
||||
<span
|
||||
className="text-xs text-slate-500 ml-auto mr-4 whitespace-nowrap"
|
||||
title={new Date(build.startedAt).toLocaleString()}
|
||||
>
|
||||
{timeAgo(build.startedAt)}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{build.status === "failure" && (
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 text-slate-400 hover:text-white"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleRetry(build._id);
|
||||
}}
|
||||
title="Retry Build"
|
||||
>
|
||||
<RotateCw className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-400"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleDelete(build._id);
|
||||
}}
|
||||
title="Delete Build"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{build.status === "failure" && (
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 text-slate-400 hover:text-white"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleRetry(build._id);
|
||||
}}
|
||||
title="Retry Build"
|
||||
>
|
||||
<RotateCw className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-400"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleDelete(build._id);
|
||||
}}
|
||||
title="Delete Build"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+36
-22
@@ -2,31 +2,45 @@ import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function timeAgo(date: number | string | Date): string {
|
||||
const now = new Date();
|
||||
const past = new Date(date);
|
||||
const msPerMinute = 60 * 1000;
|
||||
const msPerHour = msPerMinute * 60;
|
||||
const msPerDay = msPerHour * 24;
|
||||
const msPerMonth = msPerDay * 30;
|
||||
const msPerYear = msPerDay * 365;
|
||||
const now = new Date();
|
||||
const past = new Date(date);
|
||||
const msPerMinute = 60 * 1000;
|
||||
const msPerHour = msPerMinute * 60;
|
||||
const msPerDay = msPerHour * 24;
|
||||
const msPerMonth = msPerDay * 30;
|
||||
const msPerYear = msPerDay * 365;
|
||||
|
||||
const elapsed = now.getTime() - past.getTime();
|
||||
const elapsed = now.getTime() - past.getTime();
|
||||
|
||||
if (elapsed < msPerMinute) {
|
||||
return `${Math.round(elapsed / 1000)}s ago`;
|
||||
} else if (elapsed < msPerHour) {
|
||||
return `${Math.round(elapsed / msPerMinute)}m ago`;
|
||||
} else if (elapsed < msPerDay) {
|
||||
return `${Math.round(elapsed / msPerHour)}h ago`;
|
||||
} else if (elapsed < msPerMonth) {
|
||||
return `${Math.round(elapsed / msPerDay)}d ago`;
|
||||
} else if (elapsed < msPerYear) {
|
||||
return `${Math.round(elapsed / msPerMonth)}mo ago`;
|
||||
} else {
|
||||
return `${Math.round(elapsed / msPerYear)}y ago`;
|
||||
}
|
||||
if (elapsed < msPerMinute) {
|
||||
return `${Math.round(elapsed / 1000)}s ago`;
|
||||
} else if (elapsed < msPerHour) {
|
||||
return `${Math.round(elapsed / msPerMinute)}m ago`;
|
||||
} else if (elapsed < msPerDay) {
|
||||
return `${Math.round(elapsed / msPerHour)}h ago`;
|
||||
} else if (elapsed < msPerMonth) {
|
||||
return `${Math.round(elapsed / msPerDay)}d ago`;
|
||||
} else if (elapsed < msPerYear) {
|
||||
return `${Math.round(elapsed / msPerMonth)}mo ago`;
|
||||
} else {
|
||||
return `${Math.round(elapsed / msPerYear)}y ago`;
|
||||
}
|
||||
}
|
||||
|
||||
export function humanizeStatus(status: string): string {
|
||||
// Handle special statuses
|
||||
if (status === "success") return "Success";
|
||||
if (status === "failure") return "Failure";
|
||||
if (status === "queued") return "Queued";
|
||||
if (status === "in_progress") return "In Progress";
|
||||
|
||||
// Convert snake_case/underscore_separated to Title Case
|
||||
return status
|
||||
.split("_")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
+89
-110
@@ -1,127 +1,106 @@
|
||||
import { useQuery } from "convex/react";
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Download,
|
||||
Loader2,
|
||||
Terminal,
|
||||
XCircle,
|
||||
ArrowLeft,
|
||||
CheckCircle,
|
||||
Download,
|
||||
Loader2,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { humanizeStatus } from "@/lib/utils";
|
||||
import { api } from "../../convex/_generated/api";
|
||||
import type { Id } from "../../convex/_generated/dataModel";
|
||||
|
||||
export default function BuildDetail() {
|
||||
const { buildId } = useParams<{ buildId: string }>();
|
||||
const build = useQuery(api.builds.get, {
|
||||
buildId: buildId as Id<"builds">,
|
||||
});
|
||||
const { buildId } = useParams<{ buildId: string }>();
|
||||
const build = useQuery(api.builds.get, {
|
||||
buildId: buildId as Id<"builds">,
|
||||
});
|
||||
|
||||
if (build === undefined) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-slate-950 text-white">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-cyan-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (build === undefined) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-slate-950 text-white">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-cyan-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (build === null) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-slate-950 text-white gap-4">
|
||||
<h1 className="text-2xl font-bold">Build Not Found</h1>
|
||||
<Link to="/">
|
||||
<Button variant="outline">Return to Dashboard</Button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (build === null) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-slate-950 text-white gap-4">
|
||||
<h1 className="text-2xl font-bold">Build Not Found</h1>
|
||||
<Link to="/">
|
||||
<Button variant="outline">Return to Dashboard</Button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "success":
|
||||
return "text-green-400";
|
||||
case "failure":
|
||||
return "text-red-400";
|
||||
case "in_progress":
|
||||
return "text-blue-400";
|
||||
default:
|
||||
return "text-yellow-400";
|
||||
}
|
||||
};
|
||||
const getStatusColor = (status: string) => {
|
||||
if (status === "success") {
|
||||
return "text-green-400";
|
||||
}
|
||||
if (status === "failure") {
|
||||
return "text-red-400";
|
||||
}
|
||||
// All other statuses show as in progress
|
||||
return "text-blue-400";
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case "success":
|
||||
return <CheckCircle className="w-6 h-6 text-green-500" />;
|
||||
case "failure":
|
||||
return <XCircle className="w-6 h-6 text-red-500" />;
|
||||
case "in_progress":
|
||||
return <Loader2 className="w-6 h-6 text-blue-500 animate-spin" />;
|
||||
default:
|
||||
return <Clock className="w-6 h-6 text-yellow-500" />;
|
||||
}
|
||||
};
|
||||
const getStatusIcon = (status: string) => {
|
||||
if (status === "success") {
|
||||
return <CheckCircle className="w-6 h-6 text-green-500" />;
|
||||
}
|
||||
if (status === "failure") {
|
||||
return <XCircle className="w-6 h-6 text-red-500" />;
|
||||
}
|
||||
// All other statuses show as in progress
|
||||
return <Loader2 className="w-6 h-6 text-blue-500 animate-spin" />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-white p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<header className="mb-8">
|
||||
<Link
|
||||
to="/"
|
||||
className="inline-flex items-center text-slate-400 hover:text-white mb-4"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" /> Back to Dashboard
|
||||
</Link>
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-white p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<header className="mb-8">
|
||||
<Link
|
||||
to="/"
|
||||
className="inline-flex items-center text-slate-400 hover:text-white mb-4"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" /> Back to Dashboard
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
{getStatusIcon(build.status)}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">{build.target}</h1>
|
||||
<div className="flex items-center gap-2 text-slate-400 mt-1">
|
||||
<span>Build ID: {build._id}</span>
|
||||
<span>•</span>
|
||||
<span className={getStatusColor(build.status)}>
|
||||
{build.status.toUpperCase()}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>{new Date(build.startedAt).toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
{getStatusIcon(build.status)}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">{build.target}</h1>
|
||||
<div className="flex items-center gap-2 text-slate-400 mt-1">
|
||||
<span>Build ID: {build._id}</span>
|
||||
<span>•</span>
|
||||
<span className={getStatusColor(build.status)}>
|
||||
{humanizeStatus(build.status)}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>{new Date(build.startedAt).toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{build.artifactUrl && (
|
||||
<a
|
||||
href={build.artifactUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button className="bg-cyan-600 hover:bg-cyan-700">
|
||||
<Download className="w-4 h-4 mr-2" /> Download Firmware
|
||||
</Button>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="space-y-6">
|
||||
<div className="bg-slate-900 rounded-lg border border-slate-800 overflow-hidden">
|
||||
<div className="flex items-center gap-2 px-4 py-3 bg-slate-900 border-b border-slate-800">
|
||||
<Terminal className="w-4 h-4 text-slate-400" />
|
||||
<span className="font-mono text-sm text-slate-300">
|
||||
Build Logs
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-4 overflow-x-auto">
|
||||
<pre className="font-mono text-sm text-slate-300 whitespace-pre-wrap">
|
||||
{build.logs || "No logs available..."}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{build.status === "success" && build.artifactUrl && (
|
||||
<a
|
||||
href={build.artifactUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button className="bg-cyan-600 hover:bg-cyan-700">
|
||||
<Download className="w-4 h-4 mr-2" /> Download Firmware
|
||||
</Button>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user