orus-dev/dockship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deployments patch

Browse Source
This commit is contained in:
selimaj-dev
2026-01-02 14:05:06 +01:00
parent f514cbe96e
commit 3efed854bb
2 changed files with 66 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/deployments/page.tsx
+65 -82
View File
@@ -13,20 +13,20 @@ import {
GitBranch,
} from "lucide-react";
import { useEffect, useState } from "react";
import { Deployment } from "@/lib/types";
import { Application, Deployment } from "@/lib/types";
import { getDeployments } from "@/core/server/deployment";
import { getApplications } from "@/core/application";
import { cn } from "@/lib/utils";
export default function DeploymentsPage() {
const [applications, setApplications] = useState<Application[]>([]);
const [deployments, setDeployments] = useState<Deployment[]>([]);
useEffect(() => {
const fetch = async () => {
setDeployments(
(await getDeployments(await getApplications())).filter(
(d) => d !== null
)
);
const apps = await getApplications();
setApplications(apps);
setDeployments((await getDeployments(apps)).filter((d) => d !== null));
};
fetch();
}, []);
@@ -46,91 +46,74 @@ export default function DeploymentsPage() {
</Button>
</div>
<Card>
<CardContent className="p-0">
{/* Desktop table */}
<div className="hidden md:block">
<table className="w-full">
<thead>
<tr className="border-b border-border">
{["Application", "Status", "Actions"].map((h) => (
<th
key={h}
className={`text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4 ${
h === "Actions" ? "text-right" : ""
}`}
>
{h}
</th>
))}
</tr>
</thead>
<tbody>
{deployments.map((dep) => (
<tr key={dep.image} className="data-table-row">
<td className="py-3 px-4">
<div className="flex items-center gap-2">
<Rocket className="w-4 h-4 text-muted-foreground" />
<span className="font-mono text-sm">{dep.image}</span>
</div>
</td>
<td className="py-3 px-4">{dep.status}</td>
<td className="py-3 px-4">
<div className="flex items-center justify-end gap-1">
<Button variant="ghost" size="icon-sm">
<Eye className="w-3 h-3" />
</Button>
<Button variant="ghost" size="icon-sm">
<RotateCcw className="w-3 h-3" />
</Button>
<Button variant="ghost" size="icon-sm">
<MoreVertical className="w-3 h-3" />
</Button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
{/* Mobile cards */}
<div className="md:hidden divide-y divide-border">
{deployments.map((dep) => (
<div key={dep.image} className="p-4 space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Rocket className="w-4 h-4 text-muted-foreground" />
<span className="font-mono text-sm">{dep.image}</span>
</div>
{dep.status}
<div className="hidden md:visible space-y-3">
{deployments.map((dep) => (
<div
key={dep.image}
className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 border-b border-border last:border-0"
>
<div className="flex items-center gap-3">
<span
className={cn(
"size-2 rounded-full",
(dep.status === "running" && "bg-chart-2") ||
(dep.status === "pending" && "bg-chart-1") ||
"bg-slate-400 dark:bg-slate-600"
)}
/>
<div>
<div className="font-mono text-sm">
{
applications.find((app) =>
app.deployments.includes(dep.image)
)?.name
}
</div>
<div className="text-xs text-muted-foreground">
{/* {dep.version} */}
</div>
</div>
</div>
<div className="flex items-center gap-1 text-xs text-muted-foreground mt-1 sm:mt-0">
{/* <Clock className="w-3 h-3" /> {dep.time} */}
</div>
</div>
))}
</div>
{/* <div className="grid grid-cols-2 gap-2 text-xs">
{/* Mobile cards */}
<div className="md:hidden divide-y divide-border">
{deployments.map((dep) => (
<div key={dep.image} className="p-4 space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Rocket className="w-4 h-4 text-muted-foreground" />
<span className="font-mono text-sm">{dep.image}</span>
</div>
{dep.status}
</div>
{/* <div className="grid grid-cols-2 gap-2 text-xs">
<div>
<span className="text-muted-foreground">By</span>
<div className="truncate">{dep.deployedBy}</div>
</div>
</div> */}
<div className="flex justify-end gap-1 pt-2">
<Button variant="ghost" size="icon-sm">
<Eye className="w-3 h-3" />
</Button>
<Button variant="ghost" size="icon-sm">
<RotateCcw className="w-3 h-3" />
</Button>
<Button variant="ghost" size="icon-sm">
<MoreVertical className="w-3 h-3" />
</Button>
</div>
</div>
))}
<div className="flex justify-end gap-1 pt-2">
<Button variant="ghost" size="icon-sm">
<Eye className="w-3 h-3" />
</Button>
<Button variant="ghost" size="icon-sm">
<RotateCcw className="w-3 h-3" />
</Button>
<Button variant="ghost" size="icon-sm">
<MoreVertical className="w-3 h-3" />
</Button>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</DashboardLayout>
);
}
src/lib/types.ts
+1 -1
View File
@@ -62,7 +62,7 @@ export interface Deployment {
container: string;
cpu: number;
memory: number;
status: "running" | "stopped";
status: "running" | "stopped" | "pending";
ports: [number, number][];
}