Improved deployments ui
This commit is contained in:
@@ -2,16 +2,32 @@
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Rocket, RotateCcw, Eye, MoreVertical, Plus } from "lucide-react";
|
||||
import {
|
||||
Rocket,
|
||||
RotateCcw,
|
||||
Eye,
|
||||
MoreVertical,
|
||||
Plus,
|
||||
Play,
|
||||
Pause,
|
||||
Trash,
|
||||
} from "lucide-react";
|
||||
import { Application, Deployment } from "@/lib/types";
|
||||
import { getDeployments } from "@/lib/dockship/deploy";
|
||||
import { getApps } from "@/lib/dockship/application";
|
||||
import { cn } from "@/lib/utils";
|
||||
import DeployAppDialog from "@/components/dialogs/DeployApp";
|
||||
import { useAsync } from "@/hooks/use-async";
|
||||
import { useAsync, useAsyncInterval } from "@/hooks/use-async";
|
||||
import RemoveDialog from "@/components/dialogs/Remove";
|
||||
|
||||
const statusDot = {
|
||||
running: "bg-chart-2",
|
||||
@@ -20,7 +36,7 @@ const statusDot = {
|
||||
} as const;
|
||||
|
||||
export default function DeploymentsPage() {
|
||||
const { value: apps } = useAsync([], getApps);
|
||||
const { value: apps } = useAsyncInterval([], getApps, 5000);
|
||||
|
||||
const { value: deployments, loading } = useAsync([], getDeployments, [apps]);
|
||||
|
||||
@@ -44,7 +60,7 @@ export default function DeploymentsPage() {
|
||||
<Badge>
|
||||
{loading
|
||||
? "Loading…"
|
||||
: `${deployments.length} deployment${deployments.length > 0 && 's'}`}
|
||||
: `${deployments.length} deployment${deployments.length > 0 && "s"}`}
|
||||
</Badge>
|
||||
|
||||
<DeployAppDialog>
|
||||
@@ -55,79 +71,48 @@ export default function DeploymentsPage() {
|
||||
</DeployAppDialog>
|
||||
</div>
|
||||
|
||||
{/* Desktop */}
|
||||
<div className="hidden md:block space-y-3">
|
||||
<div className="divide-y divide-border">
|
||||
{deployments.map((dep) => {
|
||||
const appName =
|
||||
appNameByContainer.get(dep.container) ?? "Unknown app";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${dep.image}-${dep.container ?? "latest"}`}
|
||||
className="flex items-center 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",
|
||||
statusDot[dep.status as keyof typeof statusDot] ??
|
||||
statusDot.stopped
|
||||
)}
|
||||
/>
|
||||
<div>
|
||||
<div className="font-mono text-sm">{appName}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
<Card key={`${dep.image}-${dep.container ?? "latest"}`}>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={cn(
|
||||
"size-2 rounded-full animate-pulse",
|
||||
statusDot[dep.status as keyof typeof statusDot] ??
|
||||
statusDot.stopped,
|
||||
)}
|
||||
/>
|
||||
<CardTitle>{appName}</CardTitle>
|
||||
<CardDescription className="flex gap-3">
|
||||
{dep.ports.map(([to, from]) => (
|
||||
<span key={`${from}-${to}`}>
|
||||
{from} → {to}
|
||||
</span>
|
||||
))}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<p className="hidden xl:block text-muted-foreground">
|
||||
{dep.image}
|
||||
</p>
|
||||
<div className="flex justify-end gap-1">
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
{dep.status === "running" ? (
|
||||
<Pause className="w-3 h-3" />
|
||||
) : (
|
||||
<Play className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
<RemoveDialog remove={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center 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>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Mobile */}
|
||||
<div className="md:hidden divide-y divide-border">
|
||||
{deployments.map((dep) => {
|
||||
const appName =
|
||||
appNameByContainer.get(dep.container) ?? "Unknown app";
|
||||
|
||||
return (
|
||||
<div key={`${dep.container}-mobile`} 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">{appName}</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{dep.status}
|
||||
</span>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user