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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
"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 { Terminal, MoreVertical, Play, Square, Trash2 } from "lucide-react";
|
||||
|
||||
const containers = [
|
||||
{
|
||||
id: "c-a1b2c3d4",
|
||||
name: "api-gateway-1",
|
||||
image: "dockship/api-gateway:v2.4.1",
|
||||
node: "node-01",
|
||||
status: "running" as const,
|
||||
uptime: "3d 12h 45m",
|
||||
cpu: "12%",
|
||||
memory: "256MB / 512MB",
|
||||
},
|
||||
{
|
||||
id: "c-e5f6g7h8",
|
||||
name: "api-gateway-2",
|
||||
image: "dockship/api-gateway:v2.4.1",
|
||||
node: "node-02",
|
||||
status: "running" as const,
|
||||
uptime: "3d 12h 45m",
|
||||
cpu: "18%",
|
||||
memory: "312MB / 512MB",
|
||||
},
|
||||
{
|
||||
id: "c-i9j0k1l2",
|
||||
name: "api-gateway-3",
|
||||
image: "dockship/api-gateway:v2.4.1",
|
||||
node: "node-03",
|
||||
status: "running" as const,
|
||||
uptime: "3d 12h 45m",
|
||||
cpu: "15%",
|
||||
memory: "284MB / 512MB",
|
||||
},
|
||||
{
|
||||
id: "c-m3n4o5p6",
|
||||
name: "auth-service-1",
|
||||
image: "dockship/auth:v1.8.0",
|
||||
node: "node-01",
|
||||
status: "running" as const,
|
||||
uptime: "5d 8h 22m",
|
||||
cpu: "8%",
|
||||
memory: "128MB / 256MB",
|
||||
},
|
||||
{
|
||||
id: "c-q7r8s9t0",
|
||||
name: "auth-service-2",
|
||||
image: "dockship/auth:v1.8.0",
|
||||
node: "node-02",
|
||||
status: "running" as const,
|
||||
uptime: "5d 8h 22m",
|
||||
cpu: "6%",
|
||||
memory: "142MB / 256MB",
|
||||
},
|
||||
{
|
||||
id: "c-u1v2w3x4",
|
||||
name: "postgres-db-1",
|
||||
image: "postgres:15-alpine",
|
||||
node: "node-01",
|
||||
status: "running" as const,
|
||||
uptime: "12d 4h 15m",
|
||||
cpu: "22%",
|
||||
memory: "1.2GB / 2GB",
|
||||
},
|
||||
{
|
||||
id: "c-y5z6a7b8",
|
||||
name: "redis-cache-1",
|
||||
image: "redis:7-alpine",
|
||||
node: "node-02",
|
||||
status: "running" as const,
|
||||
uptime: "8d 16h 33m",
|
||||
cpu: "4%",
|
||||
memory: "64MB / 128MB",
|
||||
},
|
||||
{
|
||||
id: "c-c9d0e1f2",
|
||||
name: "worker-queue-1",
|
||||
image: "dockship/worker:v3.1.2",
|
||||
node: "node-03",
|
||||
status: "running" as const,
|
||||
uptime: "1d 2h 18m",
|
||||
cpu: "34%",
|
||||
memory: "512MB / 1GB",
|
||||
},
|
||||
{
|
||||
id: "c-g3h4i5j6",
|
||||
name: "worker-queue-2",
|
||||
image: "dockship/worker:v3.1.2",
|
||||
node: "node-03",
|
||||
status: "pending" as const,
|
||||
uptime: "—",
|
||||
cpu: "—",
|
||||
memory: "—",
|
||||
},
|
||||
{
|
||||
id: "c-k7l8m9n0",
|
||||
name: "metrics-collector-1",
|
||||
image: "dockship/metrics:v1.2.0",
|
||||
node: "node-01",
|
||||
status: "error" as const,
|
||||
uptime: "—",
|
||||
cpu: "—",
|
||||
memory: "—",
|
||||
},
|
||||
];
|
||||
|
||||
export default function ContainersPage() {
|
||||
return (
|
||||
<DashboardLayout
|
||||
title="Containers"
|
||||
subtitle="View and manage container instances"
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<Badge variant="terminal">{containers.length} containers</Badge>
|
||||
<Badge variant="success">
|
||||
{containers.filter((c) => c.status === "running").length} running
|
||||
</Badge>
|
||||
<Badge variant="warning">
|
||||
{containers.filter((c) => c.status === "pending").length} pending
|
||||
</Badge>
|
||||
<Badge variant="destructive">
|
||||
{containers.filter((c) => c.status === "error").length} error
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Container
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Image
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Node
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Status
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Uptime
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
CPU
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Memory
|
||||
</th>
|
||||
<th className="text-right text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{containers.map((container) => (
|
||||
<tr key={container.id} className="data-table-row">
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Terminal className="w-4 h-4 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-mono text-sm">
|
||||
{container.name}
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground font-mono">
|
||||
{container.id}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="font-mono text-xs text-muted-foreground">
|
||||
{container.image}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge variant="terminal">{container.node}</Badge>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<StatusIndicator status={container.status} showLabel />
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="font-mono text-xs">
|
||||
{container.uptime}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="font-mono text-xs">{container.cpu}</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="font-mono text-xs">
|
||||
{container.memory}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
{container.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">
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<MoreVertical className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
"use client";
|
||||
|
||||
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { StatusIndicator } from "@/components/dashboard/StatusIndicator";
|
||||
import {
|
||||
Rocket,
|
||||
RotateCcw,
|
||||
Eye,
|
||||
MoreVertical,
|
||||
Plus,
|
||||
GitBranch,
|
||||
} from "lucide-react";
|
||||
|
||||
const deployments = [
|
||||
{
|
||||
id: "dep-001",
|
||||
app: "api-gateway",
|
||||
version: "v2.4.1",
|
||||
previousVersion: "v2.4.0",
|
||||
status: "running" as const,
|
||||
deployedAt: "2024-01-15 14:32:18",
|
||||
deployedBy: "ci/github-actions",
|
||||
duration: "45s",
|
||||
replicas: "3/3",
|
||||
strategy: "rolling",
|
||||
},
|
||||
{
|
||||
id: "dep-002",
|
||||
app: "auth-service",
|
||||
version: "v1.8.0",
|
||||
previousVersion: "v1.7.9",
|
||||
status: "running" as const,
|
||||
deployedAt: "2024-01-15 14:18:42",
|
||||
deployedBy: "[email protected]",
|
||||
duration: "32s",
|
||||
replicas: "2/2",
|
||||
strategy: "rolling",
|
||||
},
|
||||
{
|
||||
id: "dep-003",
|
||||
app: "worker-queue",
|
||||
version: "v3.1.2",
|
||||
previousVersion: "v3.1.1",
|
||||
status: "pending" as const,
|
||||
deployedAt: "2024-01-15 13:58:05",
|
||||
deployedBy: "ci/github-actions",
|
||||
duration: "—",
|
||||
replicas: "3/4",
|
||||
strategy: "rolling",
|
||||
},
|
||||
{
|
||||
id: "dep-004",
|
||||
app: "metrics-collector",
|
||||
version: "v1.2.0",
|
||||
previousVersion: "v1.1.8",
|
||||
status: "error" as const,
|
||||
deployedAt: "2024-01-15 13:42:11",
|
||||
deployedBy: "ci/github-actions",
|
||||
duration: "—",
|
||||
replicas: "0/2",
|
||||
strategy: "rolling",
|
||||
},
|
||||
{
|
||||
id: "dep-005",
|
||||
app: "postgres-db",
|
||||
version: "15-alpine",
|
||||
previousVersion: "14-alpine",
|
||||
status: "running" as const,
|
||||
deployedAt: "2024-01-10 09:15:33",
|
||||
deployedBy: "[email protected]",
|
||||
duration: "2m 18s",
|
||||
replicas: "1/1",
|
||||
strategy: "recreate",
|
||||
},
|
||||
{
|
||||
id: "dep-006",
|
||||
app: "redis-cache",
|
||||
version: "7-alpine",
|
||||
previousVersion: "7-alpine",
|
||||
status: "running" as const,
|
||||
deployedAt: "2024-01-08 16:45:22",
|
||||
deployedBy: "[email protected]",
|
||||
duration: "18s",
|
||||
replicas: "1/1",
|
||||
strategy: "recreate",
|
||||
},
|
||||
];
|
||||
|
||||
export default function DeploymentsPage() {
|
||||
return (
|
||||
<DashboardLayout
|
||||
title="Deployments"
|
||||
subtitle="Deployment history and management"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="terminal">{deployments.length} deployments</Badge>
|
||||
</div>
|
||||
<Button size="sm" className="gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
New Deployment
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Application
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Version
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Status
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Replicas
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Deployed
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Duration
|
||||
</th>
|
||||
<th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Deployed By
|
||||
</th>
|
||||
<th className="text-right text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{deployments.map((dep) => (
|
||||
<tr key={dep.id} 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.app}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch className="w-3 h-3 text-muted-foreground" />
|
||||
<span className="font-mono text-sm">{dep.version}</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
← {dep.previousVersion}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<StatusIndicator status={dep.status} showLabel />
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="font-mono text-sm">{dep.replicas}</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="font-mono text-xs text-muted-foreground">
|
||||
{dep.deployedAt}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="font-mono text-xs">{dep.duration}</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{dep.deployedBy}
|
||||
</span>
|
||||
</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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Plus, Trash2, Eye, EyeOff, Copy, Save, Lock } from "lucide-react";
|
||||
|
||||
const envGroups = [
|
||||
{
|
||||
name: "api-gateway",
|
||||
variables: [
|
||||
{ key: "PORT", value: "8080", secret: false },
|
||||
{ key: "NODE_ENV", value: "production", secret: false },
|
||||
{ key: "API_KEY", value: "sk-xxxx-xxxx-xxxx", secret: true },
|
||||
{ key: "DATABASE_URL", value: "postgresql://...", secret: true },
|
||||
{ key: "REDIS_URL", value: "redis://localhost:6379", secret: false },
|
||||
{ key: "LOG_LEVEL", value: "info", secret: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "auth-service",
|
||||
variables: [
|
||||
{ key: "PORT", value: "9000", secret: false },
|
||||
{ key: "JWT_SECRET", value: "xxxxxxxxxxxx", secret: true },
|
||||
{ key: "JWT_EXPIRY", value: "7d", secret: false },
|
||||
{ key: "OAUTH_CLIENT_ID", value: "client-id-xxxx", secret: true },
|
||||
{ key: "OAUTH_CLIENT_SECRET", value: "client-secret-xxxx", secret: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "worker-queue",
|
||||
variables: [
|
||||
{ key: "QUEUE_URL", value: "amqp://localhost:5672", secret: false },
|
||||
{ key: "CONCURRENCY", value: "10", secret: false },
|
||||
{ key: "RETRY_LIMIT", value: "3", secret: false },
|
||||
{ key: "DEAD_LETTER_QUEUE", value: "dlq.worker", secret: false },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function EnvironmentPage() {
|
||||
const [selectedApp, setSelectedApp] = useState("api-gateway");
|
||||
const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({});
|
||||
|
||||
const currentGroup = envGroups.find((g) => g.name === selectedApp);
|
||||
|
||||
const toggleSecret = (key: string) => {
|
||||
setShowSecrets((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
};
|
||||
|
||||
const maskValue = (value: string) => {
|
||||
return "•".repeat(Math.min(value.length, 24));
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardLayout
|
||||
title="Environment"
|
||||
subtitle="Manage environment variables"
|
||||
>
|
||||
<div className="flex gap-6">
|
||||
{/* Sidebar */}
|
||||
<div className="w-56 flex-shrink-0">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-xs text-muted-foreground uppercase tracking-wider">
|
||||
Applications
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-2">
|
||||
{envGroups.map((group) => (
|
||||
<button
|
||||
key={group.name}
|
||||
onClick={() => setSelectedApp(group.name)}
|
||||
className={`w-full text-left px-3 py-2 text-sm font-mono transition-colors ${
|
||||
selectedApp === group.name
|
||||
? "bg-secondary text-foreground"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{group.name}
|
||||
<Badge variant="terminal" className="ml-2 text-[10px]">
|
||||
{group.variables.length}
|
||||
</Badge>
|
||||
</button>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="font-mono">{selectedApp}</CardTitle>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{currentGroup?.variables.length} variables •{" "}
|
||||
{currentGroup?.variables.filter((v) => v.secret).length}{" "}
|
||||
secrets
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" className="gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Variable
|
||||
</Button>
|
||||
<Button size="sm" className="gap-2">
|
||||
<Save className="w-4 h-4" />
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-0">
|
||||
<div className="grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
|
||||
<div className="col-span-4">Key</div>
|
||||
<div className="col-span-6">Value</div>
|
||||
<div className="col-span-2 text-right">Actions</div>
|
||||
</div>
|
||||
{currentGroup?.variables.map((variable) => (
|
||||
<div
|
||||
key={variable.key}
|
||||
className="grid grid-cols-12 gap-4 py-3 data-table-row items-center"
|
||||
>
|
||||
<div className="col-span-4 flex items-center gap-2">
|
||||
{variable.secret && (
|
||||
<Lock className="w-3 h-3 text-warning" />
|
||||
)}
|
||||
<span className="font-mono text-sm">{variable.key}</span>
|
||||
</div>
|
||||
<div className="col-span-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type={
|
||||
variable.secret && !showSecrets[variable.key]
|
||||
? "password"
|
||||
: "text"
|
||||
}
|
||||
value={
|
||||
variable.secret && !showSecrets[variable.key]
|
||||
? maskValue(variable.value)
|
||||
: variable.value
|
||||
}
|
||||
readOnly
|
||||
className="font-mono text-xs h-8 bg-background border-border"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-end gap-1">
|
||||
{variable.secret && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => toggleSecret(variable.key)}
|
||||
>
|
||||
{showSecrets[variable.key] ? (
|
||||
<EyeOff className="w-3 h-3" />
|
||||
) : (
|
||||
<Eye className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<Copy className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
+1
-1
@@ -25,7 +25,7 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased dark`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,267 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Pause, Play, Download, Filter, RefreshCw } from "lucide-react";
|
||||
|
||||
const logEntries = [
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:45.123",
|
||||
level: "info",
|
||||
source: "api-gateway-1",
|
||||
message: "Request received: GET /api/v1/users",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:45.145",
|
||||
level: "info",
|
||||
source: "api-gateway-1",
|
||||
message: "Response sent: 200 OK (22ms)",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:46.012",
|
||||
level: "info",
|
||||
source: "auth-service-1",
|
||||
message: "Token validation successful for user_id=12345",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:46.234",
|
||||
level: "warn",
|
||||
source: "worker-queue-2",
|
||||
message: "Job queue depth exceeded threshold: 150 pending jobs",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:47.001",
|
||||
level: "info",
|
||||
source: "postgres-db-1",
|
||||
message: "Query executed: SELECT * FROM users WHERE id = $1 (2ms)",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:47.456",
|
||||
level: "info",
|
||||
source: "api-gateway-2",
|
||||
message: "Request received: POST /api/v1/orders",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:47.789",
|
||||
level: "error",
|
||||
source: "metrics-collector-1",
|
||||
message: "Failed to connect to metrics endpoint: connection refused",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:48.012",
|
||||
level: "error",
|
||||
source: "metrics-collector-1",
|
||||
message: "Retry attempt 1/3 failed",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:48.234",
|
||||
level: "info",
|
||||
source: "redis-cache-1",
|
||||
message: "Cache hit: session:user:12345",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:49.001",
|
||||
level: "info",
|
||||
source: "worker-queue-1",
|
||||
message: "Job completed: send_email_notification (job_id=abc123)",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:49.345",
|
||||
level: "warn",
|
||||
source: "api-gateway-3",
|
||||
message: "High latency detected: upstream response took 850ms",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:50.012",
|
||||
level: "info",
|
||||
source: "auth-service-2",
|
||||
message: "New session created for user_id=67890",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:50.456",
|
||||
level: "error",
|
||||
source: "metrics-collector-1",
|
||||
message: "Retry attempt 2/3 failed",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:51.001",
|
||||
level: "info",
|
||||
source: "api-gateway-1",
|
||||
message: "Request received: GET /api/v1/health",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:51.023",
|
||||
level: "info",
|
||||
source: "api-gateway-1",
|
||||
message: "Response sent: 200 OK (2ms)",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:52.012",
|
||||
level: "info",
|
||||
source: "worker-queue-3",
|
||||
message: "Processing job: generate_report (job_id=def456)",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:52.234",
|
||||
level: "error",
|
||||
source: "metrics-collector-1",
|
||||
message: "Retry attempt 3/3 failed. Giving up.",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:52.456",
|
||||
level: "error",
|
||||
source: "metrics-collector-1",
|
||||
message: "Container entering unhealthy state",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:53.012",
|
||||
level: "info",
|
||||
source: "postgres-db-1",
|
||||
message: "Connection pool: 12/50 active connections",
|
||||
},
|
||||
{
|
||||
timestamp: "2024-01-15 14:32:54.001",
|
||||
level: "info",
|
||||
source: "api-gateway-2",
|
||||
message: "Request received: PUT /api/v1/users/12345",
|
||||
},
|
||||
];
|
||||
|
||||
export default function LogsPage() {
|
||||
const [isPaused, setIsPaused] = useState(false);
|
||||
const [filter, setFilter] = useState<"all" | "info" | "warn" | "error">(
|
||||
"all"
|
||||
);
|
||||
|
||||
const filteredLogs = logEntries.filter((log) => {
|
||||
if (filter === "all") return true;
|
||||
return log.level === filter;
|
||||
});
|
||||
|
||||
const getLevelClass = (level: string) => {
|
||||
switch (level) {
|
||||
case "info":
|
||||
return "log-info";
|
||||
case "warn":
|
||||
return "log-warn";
|
||||
case "error":
|
||||
return "log-error";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardLayout title="Logs" subtitle="Real-time log aggregation">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant={filter === "all" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setFilter("all")}
|
||||
>
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === "info" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setFilter("info")}
|
||||
className="gap-1"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-primary" />
|
||||
Info
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === "warn" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setFilter("warn")}
|
||||
className="gap-1"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-warning" />
|
||||
Warn
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === "error" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setFilter("error")}
|
||||
className="gap-1"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-destructive" />
|
||||
Error
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" className="gap-2">
|
||||
<Filter className="w-4 h-4" />
|
||||
Advanced Filter
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="gap-2">
|
||||
<Download className="w-4 h-4" />
|
||||
Export
|
||||
</Button>
|
||||
<div className="w-px h-6 bg-border" />
|
||||
<Button
|
||||
variant={isPaused ? "secondary" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setIsPaused(!isPaused)}
|
||||
className="gap-2"
|
||||
>
|
||||
{isPaused ? (
|
||||
<>
|
||||
<Play className="w-4 h-4" />
|
||||
Resume
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Pause className="w-4 h-4" />
|
||||
Pause
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card variant="terminal" className="h-[calc(100vh-240px)]">
|
||||
<CardHeader className="flex flex-row items-center justify-between py-2 px-4 border-b border-border">
|
||||
<CardTitle className="text-xs text-muted-foreground uppercase tracking-wider">
|
||||
Log Stream
|
||||
</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="terminal">{filteredLogs.length} entries</Badge>
|
||||
{!isPaused && (
|
||||
<div className="flex items-center gap-1 text-xs text-success">
|
||||
<RefreshCw className="w-3 h-3 animate-spin" />
|
||||
Live
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 overflow-auto h-[calc(100%-48px)]">
|
||||
<div className="font-mono text-xs">
|
||||
{filteredLogs.map((log, index) => (
|
||||
<div key={index} className="log-line flex">
|
||||
<span className="log-timestamp whitespace-nowrap">
|
||||
{log.timestamp}
|
||||
</span>
|
||||
<span
|
||||
className={`uppercase w-12 flex-shrink-0 ${getLevelClass(
|
||||
log.level
|
||||
)}`}
|
||||
>
|
||||
[{log.level}]
|
||||
</span>
|
||||
<span className="text-muted-foreground w-40 flex-shrink-0 truncate">
|
||||
{log.source}
|
||||
</span>
|
||||
<span className="text-foreground">{log.message}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,361 @@
|
||||
"use client";
|
||||
|
||||
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { MetricBar } from "@/components/dashboard/MetricBar";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
AreaChart,
|
||||
Area,
|
||||
} from "recharts";
|
||||
|
||||
const cpuData = [
|
||||
{ time: "00:00", value: 45 },
|
||||
{ time: "01:00", value: 52 },
|
||||
{ time: "02:00", value: 38 },
|
||||
{ time: "03:00", value: 42 },
|
||||
{ time: "04:00", value: 35 },
|
||||
{ time: "05:00", value: 48 },
|
||||
{ time: "06:00", value: 55 },
|
||||
{ time: "07:00", value: 62 },
|
||||
{ time: "08:00", value: 78 },
|
||||
{ time: "09:00", value: 85 },
|
||||
{ time: "10:00", value: 72 },
|
||||
{ time: "11:00", value: 68 },
|
||||
{ time: "12:00", value: 75 },
|
||||
];
|
||||
|
||||
const memoryData = [
|
||||
{ time: "00:00", value: 62 },
|
||||
{ time: "01:00", value: 64 },
|
||||
{ time: "02:00", value: 58 },
|
||||
{ time: "03:00", value: 61 },
|
||||
{ time: "04:00", value: 59 },
|
||||
{ time: "05:00", value: 63 },
|
||||
{ time: "06:00", value: 67 },
|
||||
{ time: "07:00", value: 72 },
|
||||
{ time: "08:00", value: 78 },
|
||||
{ time: "09:00", value: 82 },
|
||||
{ time: "10:00", value: 76 },
|
||||
{ time: "11:00", value: 74 },
|
||||
{ time: "12:00", value: 71 },
|
||||
];
|
||||
|
||||
const networkData = [
|
||||
{ time: "00:00", in: 12, out: 8 },
|
||||
{ time: "01:00", in: 15, out: 10 },
|
||||
{ time: "02:00", in: 8, out: 5 },
|
||||
{ time: "03:00", in: 10, out: 7 },
|
||||
{ time: "04:00", in: 6, out: 4 },
|
||||
{ time: "05:00", in: 14, out: 9 },
|
||||
{ time: "06:00", in: 22, out: 15 },
|
||||
{ time: "07:00", in: 35, out: 28 },
|
||||
{ time: "08:00", in: 48, out: 38 },
|
||||
{ time: "09:00", in: 52, out: 42 },
|
||||
{ time: "10:00", in: 45, out: 35 },
|
||||
{ time: "11:00", in: 42, out: 32 },
|
||||
{ time: "12:00", in: 38, out: 28 },
|
||||
];
|
||||
|
||||
const containerMetrics = [
|
||||
{ name: "api-gateway-1", cpu: 45, memory: 62, network: "12.4 MB/s" },
|
||||
{ name: "api-gateway-2", cpu: 52, memory: 58, network: "10.2 MB/s" },
|
||||
{ name: "api-gateway-3", cpu: 38, memory: 55, network: "8.8 MB/s" },
|
||||
{ name: "auth-service-1", cpu: 28, memory: 45, network: "3.2 MB/s" },
|
||||
{ name: "auth-service-2", cpu: 32, memory: 48, network: "2.8 MB/s" },
|
||||
{ name: "postgres-db-1", cpu: 65, memory: 78, network: "8.1 MB/s" },
|
||||
{ name: "redis-cache-1", cpu: 12, memory: 34, network: "1.8 MB/s" },
|
||||
{ name: "worker-queue-1", cpu: 55, memory: 48, network: "5.6 MB/s" },
|
||||
];
|
||||
|
||||
export default function MonitoringPage() {
|
||||
return (
|
||||
<DashboardLayout
|
||||
title="Monitoring"
|
||||
subtitle="Resource utilization and metrics"
|
||||
>
|
||||
{/* Summary Stats */}
|
||||
<div className="grid grid-cols-4 gap-4 mb-6">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-xs text-muted-foreground uppercase tracking-wider mb-1">
|
||||
Cluster CPU
|
||||
</div>
|
||||
<div className="stat-value">68%</div>
|
||||
<MetricBar value={68} max={100} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-xs text-muted-foreground uppercase tracking-wider mb-1">
|
||||
Cluster Memory
|
||||
</div>
|
||||
<div className="stat-value">71%</div>
|
||||
<MetricBar value={71} max={100} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-xs text-muted-foreground uppercase tracking-wider mb-1">
|
||||
Network In
|
||||
</div>
|
||||
<div className="stat-value">38 MB/s</div>
|
||||
<div className="text-xs text-success mt-1">↑ 12% from avg</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-xs text-muted-foreground uppercase tracking-wider mb-1">
|
||||
Network Out
|
||||
</div>
|
||||
<div className="stat-value">28 MB/s</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
↓ 5% from avg
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Charts */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
CPU Usage
|
||||
<Badge variant="terminal">Last 12 hours</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-48">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={cpuData}>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="cpuGradient"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="hsl(180, 100%, 50%)"
|
||||
stopOpacity={0.3}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="hsl(180, 100%, 50%)"
|
||||
stopOpacity={0}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "hsl(0, 0%, 55%)", fontSize: 10 }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "hsl(0, 0%, 55%)", fontSize: 10 }}
|
||||
domain={[0, 100]}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(0, 0%, 7%)",
|
||||
border: "1px solid hsl(0, 0%, 18%)",
|
||||
borderRadius: "4px",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="value"
|
||||
stroke="hsl(180, 100%, 50%)"
|
||||
strokeWidth={2}
|
||||
fill="url(#cpuGradient)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
Memory Usage
|
||||
<Badge variant="terminal">Last 12 hours</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-48">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={memoryData}>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="memoryGradient"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="hsl(142, 70%, 45%)"
|
||||
stopOpacity={0.3}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="hsl(142, 70%, 45%)"
|
||||
stopOpacity={0}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "hsl(0, 0%, 55%)", fontSize: 10 }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "hsl(0, 0%, 55%)", fontSize: 10 }}
|
||||
domain={[0, 100]}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(0, 0%, 7%)",
|
||||
border: "1px solid hsl(0, 0%, 18%)",
|
||||
borderRadius: "4px",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="value"
|
||||
stroke="hsl(142, 70%, 45%)"
|
||||
strokeWidth={2}
|
||||
fill="url(#memoryGradient)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Network Chart */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
Network I/O
|
||||
<Badge variant="terminal">Last 12 hours</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-48">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={networkData}>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "hsl(0, 0%, 55%)", fontSize: 10 }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "hsl(0, 0%, 55%)", fontSize: 10 }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(0, 0%, 7%)",
|
||||
border: "1px solid hsl(0, 0%, 18%)",
|
||||
borderRadius: "4px",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="in"
|
||||
stroke="hsl(180, 100%, 50%)"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
name="Inbound"
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="out"
|
||||
stroke="hsl(38, 92%, 50%)"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
name="Outbound"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="flex items-center gap-6 mt-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-0.5 bg-primary" />
|
||||
<span className="text-xs text-muted-foreground">Inbound</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-0.5 bg-warning" />
|
||||
<span className="text-xs text-muted-foreground">Outbound</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Container Metrics */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Container Metrics</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{containerMetrics.map((container) => (
|
||||
<div
|
||||
key={container.name}
|
||||
className="border border-border p-3 bg-secondary/20"
|
||||
>
|
||||
<div className="font-mono text-xs mb-3 truncate">
|
||||
{container.name}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<div className="flex justify-between text-[10px] text-muted-foreground mb-1">
|
||||
<span>CPU</span>
|
||||
<span>{container.cpu}%</span>
|
||||
</div>
|
||||
<MetricBar value={container.cpu} max={100} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-[10px] text-muted-foreground mb-1">
|
||||
<span>Memory</span>
|
||||
<span>{container.memory}%</span>
|
||||
</div>
|
||||
<MetricBar value={container.memory} max={100} />
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] pt-1 border-t border-border">
|
||||
<span className="text-muted-foreground">Network</span>
|
||||
<span className="font-mono">{container.network}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
"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 { Server, Plus, Settings, Trash2 } from "lucide-react";
|
||||
|
||||
const nodes = [
|
||||
{
|
||||
id: "node-01",
|
||||
name: "node-01",
|
||||
hostname: "dockship-node-01.local",
|
||||
ip: "10.0.1.10",
|
||||
os: "Ubuntu 22.04 LTS",
|
||||
docker: "24.0.7",
|
||||
cpu: { cores: 8, usage: 72 },
|
||||
memory: { total: "32 GB", used: "21.8 GB", percentage: 68 },
|
||||
disk: { total: "500 GB", used: "245 GB", percentage: 49 },
|
||||
containers: 8,
|
||||
status: "running" as const,
|
||||
labels: ["production", "primary"],
|
||||
},
|
||||
{
|
||||
id: "node-02",
|
||||
name: "node-02",
|
||||
hostname: "dockship-node-02.local",
|
||||
ip: "10.0.1.11",
|
||||
os: "Ubuntu 22.04 LTS",
|
||||
docker: "24.0.7",
|
||||
cpu: { cores: 8, usage: 45 },
|
||||
memory: { total: "32 GB", used: "16.6 GB", percentage: 52 },
|
||||
disk: { total: "500 GB", used: "178 GB", percentage: 36 },
|
||||
containers: 6,
|
||||
status: "running" as const,
|
||||
labels: ["production"],
|
||||
},
|
||||
{
|
||||
id: "node-03",
|
||||
name: "node-03",
|
||||
hostname: "dockship-node-03.local",
|
||||
ip: "10.0.1.12",
|
||||
os: "Ubuntu 22.04 LTS",
|
||||
docker: "24.0.7",
|
||||
cpu: { cores: 16, usage: 89 },
|
||||
memory: { total: "64 GB", used: "54.4 GB", percentage: 85 },
|
||||
disk: { total: "1 TB", used: "612 GB", percentage: 61 },
|
||||
containers: 12,
|
||||
status: "running" as const,
|
||||
labels: ["production", "high-memory"],
|
||||
},
|
||||
];
|
||||
|
||||
export default function NodesPage() {
|
||||
return (
|
||||
<DashboardLayout title="Nodes" subtitle="Cluster node management">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="terminal">{nodes.length} nodes</Badge>
|
||||
<Badge variant="success">
|
||||
{nodes.filter((n) => n.status === "running").length} online
|
||||
</Badge>
|
||||
</div>
|
||||
<Button size="sm" className="gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Node
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{nodes.map((node) => (
|
||||
<Card key={node.id}>
|
||||
<CardHeader className="flex flex-row items-start justify-between pb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-secondary flex items-center justify-center">
|
||||
<Server className="w-5 h-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusIndicator status={node.status} />
|
||||
<CardTitle className="font-mono">{node.name}</CardTitle>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground font-mono">
|
||||
{node.hostname} • {node.ip}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{node.labels.map((label) => (
|
||||
<Badge key={label} variant="outline" className="text-[10px]">
|
||||
{label}
|
||||
</Badge>
|
||||
))}
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<Settings className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-5 gap-6">
|
||||
{/* System Info */}
|
||||
<div className="border-r border-border pr-6">
|
||||
<div className="text-xs text-muted-foreground mb-2">
|
||||
System
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-muted-foreground">OS</span>
|
||||
<span className="font-mono">{node.os}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-muted-foreground">Docker</span>
|
||||
<span className="font-mono">{node.docker}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-muted-foreground">Containers</span>
|
||||
<span className="font-mono">{node.containers}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CPU */}
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-2">
|
||||
CPU ({node.cpu.cores} cores)
|
||||
</div>
|
||||
<div className="stat-value mb-2">{node.cpu.usage}%</div>
|
||||
<MetricBar value={node.cpu.usage} max={100} />
|
||||
</div>
|
||||
|
||||
{/* Memory */}
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-2">
|
||||
Memory
|
||||
</div>
|
||||
<div className="stat-value mb-2">
|
||||
{node.memory.percentage}%
|
||||
</div>
|
||||
<MetricBar value={node.memory.percentage} max={100} />
|
||||
<div className="text-[10px] text-muted-foreground mt-1 font-mono">
|
||||
{node.memory.used} / {node.memory.total}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Disk */}
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-2">Disk</div>
|
||||
<div className="stat-value mb-2">{node.disk.percentage}%</div>
|
||||
<MetricBar value={node.disk.percentage} max={100} />
|
||||
<div className="text-[10px] text-muted-foreground mt-1 font-mono">
|
||||
{node.disk.used} / {node.disk.total}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-2">
|
||||
Quick Actions
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Button
|
||||
variant="terminal"
|
||||
size="sm"
|
||||
className="w-full justify-start"
|
||||
>
|
||||
SSH Connect
|
||||
</Button>
|
||||
<Button
|
||||
variant="terminal"
|
||||
size="sm"
|
||||
className="w-full justify-start"
|
||||
>
|
||||
View Logs
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
const NotFound = () => {
|
||||
useEffect(() => {
|
||||
console.error(
|
||||
"404 Error: User attempted to access non-existent route:",
|
||||
location.pathname
|
||||
);
|
||||
}, [location.pathname]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-muted">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">404</h1>
|
||||
<p className="mb-4 text-xl text-muted-foreground">
|
||||
Oops! Page not found
|
||||
</p>
|
||||
<a href="/" className="text-primary underline hover:text-primary/90">
|
||||
Return to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
@@ -0,0 +1,278 @@
|
||||
"use client";
|
||||
|
||||
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
|
||||
import { StatCard } from "@/components/dashboard/StatCard";
|
||||
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 {
|
||||
Box,
|
||||
Server,
|
||||
Container,
|
||||
Activity,
|
||||
ArrowRight,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
|
||||
const recentDeployments = [
|
||||
{
|
||||
id: "dep-001",
|
||||
app: "api-gateway",
|
||||
version: "v2.4.1",
|
||||
status: "running" as const,
|
||||
time: "2m ago",
|
||||
},
|
||||
{
|
||||
id: "dep-002",
|
||||
app: "auth-service",
|
||||
version: "v1.8.0",
|
||||
status: "running" as const,
|
||||
time: "15m ago",
|
||||
},
|
||||
{
|
||||
id: "dep-003",
|
||||
app: "worker-queue",
|
||||
version: "v3.1.2",
|
||||
status: "pending" as const,
|
||||
time: "32m ago",
|
||||
},
|
||||
{
|
||||
id: "dep-004",
|
||||
app: "metrics-collector",
|
||||
version: "v1.2.0",
|
||||
status: "error" as const,
|
||||
time: "1h ago",
|
||||
},
|
||||
];
|
||||
|
||||
const applications = [
|
||||
{
|
||||
name: "api-gateway",
|
||||
containers: 3,
|
||||
cpu: 45,
|
||||
memory: 62,
|
||||
status: "running" as const,
|
||||
},
|
||||
{
|
||||
name: "auth-service",
|
||||
containers: 2,
|
||||
cpu: 28,
|
||||
memory: 45,
|
||||
status: "running" as const,
|
||||
},
|
||||
{
|
||||
name: "postgres-db",
|
||||
containers: 1,
|
||||
cpu: 65,
|
||||
memory: 78,
|
||||
status: "running" as const,
|
||||
},
|
||||
{
|
||||
name: "redis-cache",
|
||||
containers: 1,
|
||||
cpu: 12,
|
||||
memory: 34,
|
||||
status: "running" as const,
|
||||
},
|
||||
{
|
||||
name: "worker-queue",
|
||||
containers: 4,
|
||||
cpu: 55,
|
||||
memory: 48,
|
||||
status: "pending" as const,
|
||||
},
|
||||
];
|
||||
|
||||
const nodes = [
|
||||
{
|
||||
name: "node-01",
|
||||
ip: "10.0.1.10",
|
||||
cpu: 72,
|
||||
memory: 68,
|
||||
containers: 8,
|
||||
status: "running" as const,
|
||||
},
|
||||
{
|
||||
name: "node-02",
|
||||
ip: "10.0.1.11",
|
||||
cpu: 45,
|
||||
memory: 52,
|
||||
containers: 6,
|
||||
status: "running" as const,
|
||||
},
|
||||
{
|
||||
name: "node-03",
|
||||
ip: "10.0.1.12",
|
||||
cpu: 89,
|
||||
memory: 85,
|
||||
containers: 12,
|
||||
status: "running" as const,
|
||||
},
|
||||
];
|
||||
|
||||
export default function OverviewPage() {
|
||||
return (
|
||||
<DashboardLayout title="Overview" subtitle="System status and metrics">
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-4 gap-4 mb-6">
|
||||
<StatCard
|
||||
title="Applications"
|
||||
value="12"
|
||||
subtitle="3 pending"
|
||||
icon={<Box className="w-4 h-4" />}
|
||||
/>
|
||||
<StatCard
|
||||
title="Containers"
|
||||
value="47"
|
||||
subtitle="all healthy"
|
||||
icon={<Container className="w-4 h-4" />}
|
||||
/>
|
||||
<StatCard
|
||||
title="Nodes"
|
||||
value="3"
|
||||
subtitle="online"
|
||||
icon={<Server className="w-4 h-4" />}
|
||||
/>
|
||||
<StatCard
|
||||
title="Uptime"
|
||||
value="99.9%"
|
||||
trend={{ value: 0.2, isPositive: true }}
|
||||
icon={<Activity className="w-4 h-4" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{/* Applications Table */}
|
||||
<Card className="col-span-2">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>Applications</CardTitle>
|
||||
<Button variant="ghost" size="sm" className="text-xs gap-1">
|
||||
View all <ArrowRight className="w-3 h-3" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-0">
|
||||
<div className="grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
|
||||
<div className="col-span-4">Name</div>
|
||||
<div className="col-span-2">Containers</div>
|
||||
<div className="col-span-2">CPU</div>
|
||||
<div className="col-span-2">Memory</div>
|
||||
<div className="col-span-2">Status</div>
|
||||
</div>
|
||||
{applications.map((app) => (
|
||||
<div
|
||||
key={app.name}
|
||||
className="grid grid-cols-12 gap-4 py-3 data-table-row items-center"
|
||||
>
|
||||
<div className="col-span-4 font-mono text-sm">{app.name}</div>
|
||||
<div className="col-span-2 text-sm text-muted-foreground">
|
||||
{app.containers}
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<MetricBar value={app.cpu} max={100} />
|
||||
<span className="text-xs text-muted-foreground font-mono w-8">
|
||||
{app.cpu}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<MetricBar value={app.memory} max={100} />
|
||||
<span className="text-xs text-muted-foreground font-mono w-8">
|
||||
{app.memory}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<StatusIndicator status={app.status} showLabel />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recent Deployments */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>Recent Deployments</CardTitle>
|
||||
<Button variant="ghost" size="sm" className="text-xs gap-1">
|
||||
View all <ArrowRight className="w-3 h-3" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{recentDeployments.map((dep) => (
|
||||
<div
|
||||
key={dep.id}
|
||||
className="flex items-center justify-between py-2 border-b border-border last:border-0"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<StatusIndicator status={dep.status} size="sm" />
|
||||
<div>
|
||||
<div className="font-mono text-sm">{dep.app}</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">
|
||||
<Clock className="w-3 h-3" />
|
||||
{dep.time}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Nodes */}
|
||||
<Card className="mt-4">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>Cluster Nodes</CardTitle>
|
||||
<Badge variant="terminal">{nodes.length} nodes</Badge>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{nodes.map((node) => (
|
||||
<div
|
||||
key={node.name}
|
||||
className="border border-border p-4 bg-secondary/30"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusIndicator status={node.status} />
|
||||
<span className="font-mono text-sm">{node.name}</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground font-mono">
|
||||
{node.ip}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">CPU</span>
|
||||
<span className="font-mono">{node.cpu}%</span>
|
||||
</div>
|
||||
<MetricBar value={node.cpu} max={100} />
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">Memory</span>
|
||||
<span className="font-mono">{node.memory}%</span>
|
||||
</div>
|
||||
<MetricBar value={node.memory} max={100} />
|
||||
<div className="flex items-center justify-between text-xs pt-2 border-t border-border mt-2">
|
||||
<span className="text-muted-foreground">Containers</span>
|
||||
<span className="font-mono">{node.containers}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user