Concept ui
This commit is contained in:
@@ -0,0 +1,202 @@
|
||||
"use client";
|
||||
|
||||
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { StatusIndicator } from "@/components/dashboard/StatusIndicator";
|
||||
import { MetricBar } from "@/components/dashboard/MetricBar";
|
||||
import { Play, Square, RotateCcw, MoreVertical, Plus } from "lucide-react";
|
||||
|
||||
const applications = [
|
||||
{
|
||||
id: "app-001",
|
||||
name: "api-gateway",
|
||||
image: "dockship/api-gateway:v2.4.1",
|
||||
containers: 3,
|
||||
replicas: "3/3",
|
||||
cpu: 45,
|
||||
memory: 62,
|
||||
network: "12.4 MB/s",
|
||||
status: "running" as const,
|
||||
ports: ["80:8080", "443:8443"],
|
||||
},
|
||||
{
|
||||
id: "app-002",
|
||||
name: "auth-service",
|
||||
image: "dockship/auth:v1.8.0",
|
||||
containers: 2,
|
||||
replicas: "2/2",
|
||||
cpu: 28,
|
||||
memory: 45,
|
||||
network: "3.2 MB/s",
|
||||
status: "running" as const,
|
||||
ports: ["9000:9000"],
|
||||
},
|
||||
{
|
||||
id: "app-003",
|
||||
name: "postgres-db",
|
||||
image: "postgres:15-alpine",
|
||||
containers: 1,
|
||||
replicas: "1/1",
|
||||
cpu: 65,
|
||||
memory: 78,
|
||||
network: "8.1 MB/s",
|
||||
status: "running" as const,
|
||||
ports: ["5432:5432"],
|
||||
},
|
||||
{
|
||||
id: "app-004",
|
||||
name: "redis-cache",
|
||||
image: "redis:7-alpine",
|
||||
containers: 1,
|
||||
replicas: "1/1",
|
||||
cpu: 12,
|
||||
memory: 34,
|
||||
network: "1.8 MB/s",
|
||||
status: "running" as const,
|
||||
ports: ["6379:6379"],
|
||||
},
|
||||
{
|
||||
id: "app-005",
|
||||
name: "worker-queue",
|
||||
image: "dockship/worker:v3.1.2",
|
||||
containers: 4,
|
||||
replicas: "3/4",
|
||||
cpu: 55,
|
||||
memory: 48,
|
||||
network: "5.6 MB/s",
|
||||
status: "pending" as const,
|
||||
ports: [],
|
||||
},
|
||||
{
|
||||
id: "app-006",
|
||||
name: "metrics-collector",
|
||||
image: "dockship/metrics:v1.2.0",
|
||||
containers: 2,
|
||||
replicas: "0/2",
|
||||
cpu: 0,
|
||||
memory: 0,
|
||||
network: "0 MB/s",
|
||||
status: "error" as const,
|
||||
ports: ["9090:9090"],
|
||||
},
|
||||
];
|
||||
|
||||
export default function ApplicationsPage() {
|
||||
return (
|
||||
<DashboardLayout
|
||||
title="Applications"
|
||||
subtitle="Manage deployed applications"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="terminal">{applications.length} apps</Badge>
|
||||
<Badge variant="success">
|
||||
{applications.filter((a) => a.status === "running").length} running
|
||||
</Badge>
|
||||
</div>
|
||||
<Button size="sm" className="gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Deploy Application
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{applications.map((app) => (
|
||||
<Card key={app.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="grid grid-cols-12 gap-4 items-center">
|
||||
{/* Status & Name */}
|
||||
<div className="col-span-3 flex items-center gap-3">
|
||||
<StatusIndicator status={app.status} />
|
||||
<div>
|
||||
<div className="font-mono text-sm font-medium">
|
||||
{app.name}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground font-mono truncate max-w-48">
|
||||
{app.image}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Replicas */}
|
||||
<div className="col-span-1">
|
||||
<div className="text-xs text-muted-foreground">Replicas</div>
|
||||
<div className="font-mono text-sm">{app.replicas}</div>
|
||||
</div>
|
||||
|
||||
{/* CPU */}
|
||||
<div className="col-span-2">
|
||||
<div className="text-xs text-muted-foreground mb-1">CPU</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MetricBar value={app.cpu} max={100} />
|
||||
<span className="text-xs font-mono w-8">{app.cpu}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Memory */}
|
||||
<div className="col-span-2">
|
||||
<div className="text-xs text-muted-foreground mb-1">
|
||||
Memory
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MetricBar value={app.memory} max={100} />
|
||||
<span className="text-xs font-mono w-8">{app.memory}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Network */}
|
||||
<div className="col-span-1">
|
||||
<div className="text-xs text-muted-foreground">Network</div>
|
||||
<div className="font-mono text-xs">{app.network}</div>
|
||||
</div>
|
||||
|
||||
{/* Ports */}
|
||||
<div className="col-span-2">
|
||||
<div className="text-xs text-muted-foreground mb-1">
|
||||
Ports
|
||||
</div>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{app.ports.length > 0 ? (
|
||||
app.ports.map((port) => (
|
||||
<Badge
|
||||
key={port}
|
||||
variant="terminal"
|
||||
className="text-[10px]"
|
||||
>
|
||||
{port}
|
||||
</Badge>
|
||||
))
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">—</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="col-span-1 flex items-center justify-end gap-1">
|
||||
{app.status === "running" ? (
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<Square className="w-3 h-3" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<Play 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user