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, GitBranch,
} from "lucide-react"; } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Deployment } from "@/lib/types"; import { Application, Deployment } from "@/lib/types";
import { getDeployments } from "@/core/server/deployment"; import { getDeployments } from "@/core/server/deployment";
import { getApplications } from "@/core/application"; import { getApplications } from "@/core/application";
import { cn } from "@/lib/utils";
export default function DeploymentsPage() { export default function DeploymentsPage() {
const [applications, setApplications] = useState<Application[]>([]);
const [deployments, setDeployments] = useState<Deployment[]>([]); const [deployments, setDeployments] = useState<Deployment[]>([]);
useEffect(() => { useEffect(() => {
const fetch = async () => { const fetch = async () => {
setDeployments( const apps = await getApplications();
(await getDeployments(await getApplications())).filter( setApplications(apps);
(d) => d !== null setDeployments((await getDeployments(apps)).filter((d) => d !== null));
)
);
}; };
fetch(); fetch();
}, []); }, []);
@@ -46,91 +46,74 @@ export default function DeploymentsPage() {
</Button> </Button>
</div> </div>
<Card> <div className="hidden md:visible space-y-3">
<CardContent className="p-0"> {deployments.map((dep) => (
{/* Desktop table */} <div
<div className="hidden md:block"> key={dep.image}
<table className="w-full"> className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 border-b border-border last:border-0"
<thead> >
<tr className="border-b border-border"> <div className="flex items-center gap-3">
{["Application", "Status", "Actions"].map((h) => ( <span
<th className={cn(
key={h} "size-2 rounded-full",
className={`text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4 ${ (dep.status === "running" && "bg-chart-2") ||
h === "Actions" ? "text-right" : "" (dep.status === "pending" && "bg-chart-1") ||
}`} "bg-slate-400 dark:bg-slate-600"
> )}
{h} />
</th> <div>
))} <div className="font-mono text-sm">
</tr> {
</thead> applications.find((app) =>
<tbody> app.deployments.includes(dep.image)
{deployments.map((dep) => ( )?.name
<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> </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> <div>
<span className="text-muted-foreground">By</span> <span className="text-muted-foreground">By</span>
<div className="truncate">{dep.deployedBy}</div> <div className="truncate">{dep.deployedBy}</div>
</div> </div>
</div> */} </div> */}
<div className="flex justify-end gap-1 pt-2"> <div className="flex justify-end gap-1 pt-2">
<Button variant="ghost" size="icon-sm"> <Button variant="ghost" size="icon-sm">
<Eye className="w-3 h-3" /> <Eye className="w-3 h-3" />
</Button> </Button>
<Button variant="ghost" size="icon-sm"> <Button variant="ghost" size="icon-sm">
<RotateCcw className="w-3 h-3" /> <RotateCcw className="w-3 h-3" />
</Button> </Button>
<Button variant="ghost" size="icon-sm"> <Button variant="ghost" size="icon-sm">
<MoreVertical className="w-3 h-3" /> <MoreVertical className="w-3 h-3" />
</Button> </Button>
</div> </div>
</div>
))}
</div> </div>
</CardContent> ))}
</Card> </div>
</DashboardLayout> </DashboardLayout>
); );
} }
src/lib/types.ts
+1 -1
View File
@@ -62,7 +62,7 @@ export interface Deployment {
container: string; container: string;
cpu: number; cpu: number;
memory: number; memory: number;
status: "running" | "stopped"; status: "running" | "stopped" | "pending";
ports: [number, number][]; ports: [number, number][];
} }