Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1038 from 190km/swarm-style-improvement

Browse Source 
style: swarm style improvement
This commit is contained in:
Mauricio Siu
2025-01-01 19:02:57 -06:00
committed by GitHub
parent 9c783177c8 b17369264c
commit cbc8c24985
2 changed files with 134 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dokploy/components/dashboard/swarm/details/details-card.tsx
View File

@@ -63,7 +63,7 @@ export function NodeCard({ node, serverId }: Props) {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-6"> <div className="space-y-6">
<div className="flex flex-wrap items-center justify-between"> <div className="flex flex-wrap gap-y-2 items-center justify-between">
<div className="flex items-center space-x-4 p-2 rounded-xl border"> <div className="flex items-center space-x-4 p-2 rounded-xl border">
<div className={`h-2.5 w-2.5 rounded-full ${node.Status === "Ready" ? "bg-green-500" : "bg-red-500"}`} /> <div className={`h-2.5 w-2.5 rounded-full ${node.Status === "Ready" ? "bg-green-500" : "bg-red-500"}`} />
<div className="font-medium">{node.Hostname}</div> <div className="font-medium">{node.Hostname}</div>

256
apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
View File

@@ -2,29 +2,23 @@ import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { import { Activity, Loader2, Monitor, Settings, Server } from "lucide-react";
Activity,
Loader2,
Monitor,
Settings,
Server,
} from "lucide-react";
import { NodeCard } from "./details/details-card"; import { NodeCard } from "./details/details-card";
interface Props { interface Props {
serverId?: string; serverId?: string;
} }
export default function SwarmMonitorCard({ serverId }: Props) { export default function SwarmMonitorCard({ serverId }: Props) {
const { data: nodes, isLoading } = api.swarm.getNodes.useQuery({ const { data: nodes, isLoading } = api.swarm.getNodes.useQuery({
serverId, serverId,
}); });
if (isLoading) { if (isLoading) {
return ( return (
@@ -50,116 +44,132 @@ export default function SwarmMonitorCard({ serverId }: Props) {
); );
} }
const totalNodes = nodes.length; const totalNodes = nodes.length;
const activeNodesCount = nodes.filter((node) => node.Status === "Ready").length; const activeNodesCount = nodes.filter(
const managerNodesCount = nodes.filter((node) =>node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable").length; (node) => node.Status === "Ready",
const activeNodes = nodes.filter((node) => node.Status === "Ready"); ).length;
const managerNodes = nodes.filter((node) => node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable"); const managerNodesCount = nodes.filter(
(node) =>
node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
).length;
const activeNodes = nodes.filter((node) => node.Status === "Ready");
const managerNodes = nodes.filter(
(node) =>
node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
);
return ( return (
<div className="min-h-screen"> <div>
<div className="w-full max-w-7xl mx-auto space-y-6 py-4"> <div className="w-full max-w-7xl mx-auto space-y-6 py-4">
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<div className="space-y-1"> <div className="space-y-1">
<h1 className="text-2xl font-semibold tracking-tight">Docker Swarm Overview</h1> <h1 className="text-2xl font-semibold tracking-tight">
<p className="text-sm text-muted-foreground">Monitor and manage your Docker Swarm cluster</p> Docker Swarm Overview
</div> </h1>
{!serverId && ( <p className="text-sm text-muted-foreground">
<Button onClick={() => window.location.replace("/dashboard/settings/cluster")}> Monitor and manage your Docker Swarm cluster
<Settings className="mr-2 h-4 w-4" /> </p>
Manage Cluster </div>
</Button> {!serverId && (
)} <Button
</header> onClick={() =>
window.location.replace("/dashboard/settings/cluster")
}
>
<Settings className="mr-2 h-4 w-4" />
Manage Cluster
</Button>
)}
</header>
<div className="grid gap-6 md:grid-cols-3"> <div className="grid gap-6 md:grid-cols-3">
<Card className="bg-background"> <Card className="bg-background">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Nodes</CardTitle> <CardTitle className="text-sm font-medium">Total Nodes</CardTitle>
<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md"> <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
<Server className="h-4 w-4 text-muted-foreground dark:text-emerald-600" /> <Server className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">{totalNodes}</div> <div className="text-2xl font-bold">{totalNodes}</div>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-background"> <Card className="bg-background">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium"> <div className="flex items-center gap-2">
Active Nodes <CardTitle className="text-sm font-medium">
<Badge variant="green"> Active Nodes
Online </CardTitle>
</Badge> <Badge variant="green">Online</Badge>
</CardTitle> </div>
<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md"> <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
<Activity className="h-4 w-4 text-muted-foreground dark:text-emerald-600" /> <Activity className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<div className="text-2xl font-bold"> <div className="text-2xl font-bold">
{activeNodesCount} / {totalNodes} {activeNodesCount} / {totalNodes}
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<div className="max-h-48 overflow-y-auto"> <div className="max-h-48 overflow-y-auto">
{activeNodes.map((node) => ( {activeNodes.map((node) => (
<div key={node.ID} className="flex items-center gap-2"> <div key={node.ID} className="flex items-center gap-2">
{node.Hostname} {node.Hostname}
</div> </div>
))} ))}
</div> </div>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-background"> <Card className="bg-background">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium"> <div className="flex items-center gap-2">
Manager Nodes <CardTitle className="text-sm font-medium">
<Badge variant="green"> Manager Nodes
Online </CardTitle>
</Badge> <Badge variant="green">Online</Badge>
</CardTitle> </div>
<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md"> <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
<Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" /> <Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<div className="text-2xl font-bold"> <div className="text-2xl font-bold">
{managerNodesCount} / {totalNodes} {managerNodesCount} / {totalNodes}
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<div className="max-h-48 overflow-y-auto"> <div className="max-h-48 overflow-y-auto">
{managerNodes.map((node) => ( {managerNodes.map((node) => (
<div key={node.ID} className="flex items-center gap-2"> <div key={node.ID} className="flex items-center gap-2">
{node.Hostname} {node.Hostname}
</div> </div>
))} ))}
</div> </div>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
{nodes.map((node) => ( {nodes.map((node) => (
<NodeCard key={node.ID} node={node} serverId={serverId} /> <NodeCard key={node.ID} node={node} serverId={serverId} />
))} ))}
</div> </div>
</div> </div>
</div> </div>
); );
} }